@use "../panel/panel";
@use "../_layout/lists";
@use "../_layout/mixins";

.xScroll {
  background: none;
  padding: 0;
  border: 0;
  position: relative;
}
.xScroll__above {
  position: relative;
  z-index: calc(var(--z) * 11);
}
.xScroll__items {
  --startFadeOpacity: 0;
  --endFadeOpacity: 1;
  --maskColor: var(--white);
  //box-sizing: content-box; //not sure why it was added in the first place, but removing it seems to have no negative consequences
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  list-style: none;
  margin: 1em 0 0;
  padding: 0;
  width: 100%;
  gap: var(--gap, 0);

  &:before {
    left: -1px;
    background: linear-gradient(
      90deg,
      var(--maskColor, #fff),
      hsla(0, 0%, 100%, 0)
    );
    opacity: var(--startFadeOpacity);
  }
  &:after {
    right: -1px;
    background: linear-gradient(
      270deg,
      var(--maskColor, #fff),
      hsla(0, 0%, 100%, 0)
    );
    opacity: var(--endFadeOpacity);
  }

  &:before,
  &:after {
    content: "";
    width: var(--xScrollMaskWidth, 1em);
    bottom: 0;
    top: 0;
    position: absolute;
    z-index: calc(var(--z) * 10);
    pointer-events: none;
  }

  & > * {
    flex: 0 0 auto;
  }
}