@use '../../scss/spacers' as spacers;
@use '../../scss/palette' as palette;
@use '../../scss/breakpoints' as breakpoints;

// Disables fordi stylelint og prettier er uenige
/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
$gradient:
  rgb(0 0 0 / 27%),
  rgb(0 0 0 / 27%) 18%,
  transparent;

.horizontalscroll {
  position: relative;

  &__viewport {
    display: flex;

    &:focus-visible {
      outline: spacers.getSpacer(4xs) solid palette.$black;
      outline-offset: -1px;
    }

    &--overflow {
      overflow: auto hidden;
    }
  }

  &__indicator {
    position: absolute;
    width: 23px;
    top: 0;
    height: 100%;
    opacity: 0;
    transition: opacity 0.25s ease-in-out;

    &--left {
      left: 0;
      background: linear-gradient(to right, $gradient);
    }

    &--right {
      right: 0;
      background: linear-gradient(to left, $gradient);
    }

    &--visible {
      opacity: 1;
    }
  }
}