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

.#{$namespace}-native-scroll {
  @include basis {
    position: relative;
    overflow: hidden;
  }

  @include inherit-color;

  &__wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: scroll;
    vertical-align: top;
    scrollbar-width: none;

    @include clear-both;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  &--vertical > &__wrapper {
    overflow-x: hidden;
  }

  &--horizontal > &__wrapper {
    overflow-y: hidden;
  }

  &--horizontal > &__wrapper,
  &--both > &__wrapper {
    display: inline-block;
  }

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

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

    & > * {
      pointer-events: auto;
    }
  }

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

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