@use 'sass:map';

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

$scroll: () !default;
$scroll: map.merge(
  (
    move-duration: 180ms,
    move-timing: cubic-bezier(0.165, 0.84, 0.44, 1)
  ),
  $scroll
);

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

  @include basis {
    position: relative;
    overflow: hidden;
  }

  @include inherit-color;

  &__wrapper {
    position: relative;
    vertical-align: top;
    transition-timing-function: value('scroll-move-timing');
    transition-duration: value('scroll-move-duration');
    transition-property: transform;
    will-change: transform;

    @include clear-both;
  }

  $wrap: #{&}__wrapper;

  &--scrolling,
  &--using-bar,
  &--no-ready,
  &--no-transition {
    & > #{$wrap} {
      transition-duration: 0ms;
    }
  }

  &--no-ready {
    & > #{$wrap} {
      display: inline-block;
    }
  }

  // 与使用 js 找到所有子元素再添加样式相比效率如何 (不太好测试) ?
  &--scrolling,
  &--using-bar {
    & > #{$wrap} > * {
      pointer-events: none;
    }
  }

  &--horizontal,
  &--both {
    & > #{$wrap} {
      display: inline-block;
    }
  }

  &__extra {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    width: 100%;
    height: 100%;

    & > * {
      position: relative;
      z-index: 10;
    }
  }

  &--both > &__bar--horizontal {
    width: calc(100% - value('scrollbar-width') + 1px);
  }

  &--both > &__bar--vertical {
    height: calc(100% - value('scrollbar-width') + 1px);
  }
}