@use 'sass:map';

@use './shared' as *;
@use './design' as *;

$scrollbar: () !default;
$scrollbar: map.merge(
  (
    move-duration: 140ms,
    move-timing: cubic-bezier(0.165, 0.84, 0.44, 1),
    width: 6px,
    bar-bg-color: value('color-primary-opacity-6'),
    track-bg-color: value('color-primary-opacity-8')
  ),
  $scrollbar
);

.#{$namespace}-scrollbar {
  &-vars {
    @include define-preset-values('scrollbar', $scrollbar);
  }

  @include basis {
    position: absolute;
    z-index: 10;
    background-color: transparent;
  }

  @include inherit-color;

  $bar: #{&}__bar;

  &--disabled {
    pointer-events: none;
    opacity: 0%;
  }

  &--top,
  &--bottom {
    inset-inline: 0;
    height: value('scrollbar-width');

    #{$bar} {
      height: 100%;
      will-change: width;
    }
  }

  &--right,
  &--left {
    top: 0;
    bottom: 0;
    width: value('scrollbar-width');

    #{$bar} {
      width: 100%;
      will-change: height;
    }
  }

  &--top {
    top: 0;
  }

  &--right {
    inset-inline-end: 0;
  }

  &--bottom {
    bottom: 0;
  }

  &--left {
    inset-inline-start: 0;
  }

  &__track {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background-color: value('scrollbar-track-bg-color');
    border-radius: calc(value('scrollbar-width') * 0.5);
    transition: value('transition-opacity');

    &--disabled {
      pointer-events: none;
      background-color: transparent;
    }
  }

  &--fade &__track {
    opacity: 0%;
  }

  &--active &__track,
  &--scrolling &__track {
    opacity: 60%;
  }

  &--tracking &__track {
    opacity: 80%;
  }

  &__bar {
    position: absolute;
    cursor: pointer;
    background-color: value('scrollbar-bar-bg-color');
    border-radius: calc(value('scrollbar-width') * 0.5);
    transition:
      width value('transition-base'),
      height value('transition-base'),
      value('transition-opacity'),
      transform value('scrollbar-move-duration') value('scrollbar-move-timing');
    will-change: transform;
  }

  &--fade &__bar {
    opacity: 0%;
  }

  &--active &__bar {
    opacity: 60%;

    &:hover {
      opacity: 80%;
    }
  }

  &--tracking &__bar {
    opacity: 60%;
    transition-property: opacity;
  }

  &--scrolling &__bar {
    opacity: 100%;
    transition-property: opacity;
  }
}