@import '../style/functions.scss';
@import '../style/theme.scss';
@import '../style/mixins.scss';

$scrollbar-prefix: 'dk-scrollbar';

.#{$scrollbar-prefix} {
  @include reset-component();
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

  &-view {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;

    &::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
  }

  &-track-horizontal,
  &-track-vertical {
    position: absolute;
    opacity: 1;
    transition: opacity 200ms;
    border-radius: $scrollbar-thumb-size / 2;
  }

  &-track-horizontal {
    left: 0;
    bottom: 0;
    width: 100%;
    height: $scrollbar-thumb-size;
  }

  &-track-vertical {
    top: 0;
    right: 0;
    width: $scrollbar-thumb-size;
    height: 100%;
  }

  &-hide-track {
    opacity: 0;
  }

  &-thumb-horizontal,
  &-thumb-vertical {
    position: relative;
    display: block;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: $scrollbar-thumb-size / 2;
    cursor: pointer;
  }

  &-thumb-vertical {
    width: 100%;
    height: 0;
  }

  &-thumb-horizontal {
    width: 0;
    height: 100%;
  }
}