$name: 'ivue-scrollbar';

:root {
  // bar
  --#{$name}-bar-position: 2px;
  --#{$name}-bar-radius: 4px;

  // horizontal
  --#{$name}-bar-horizontal-height: 6px;
  --#{$name}-bar-horizontal-left: 2px;

  // color
  --#{$name}-thumb-color: #909399;
}

.#{$name} {
  position: relative;
  height: 100%;
  overflow: hidden;

  &-wrapper {
    overflow: auto;
    height: 100%;
  }

  // 因此默认滚动条样式
  &-hidden-default {
    scrollbar-width: none;

    // 隐藏滚动条
    &::-webkit-scrollbar {
      display: none;
    }
  }

  // bar高度
  &-bar {
    position: absolute;
    right: var(--#{$name}-bar-position);
    bottom: var(--#{$name}-bar-position);
    z-index: 1;
    border-radius: var(--#{$name}-bar-radius);
  }

  // 横向
  &-bar.is-horizontal {
    height: var(--#{$name}-bar-horizontal-height);
    left: var(--#{$name}-bar-horizontal-left);

    .#{$name}-thumb {
      height: 100%;
    }
  }

  // 竖向
  &-bar.is-vertical {
    width: var(--#{$name}-bar-horizontal-height);
    top: var(--#{$name}-bar-horizontal-left);

    .#{$name}-thumb {
      width: 100%;
    }
  }

  &-thumb {
    position: relative;
    display: block;
    width: 0;
    height: 0;
    cursor: pointer;
    border-radius: inherit;
    background-color: var(--#{$name}-thumb-color);
    transition: 0.3s opacity;
    opacity: 0.3;

    &:hover {
      opacity: 0.5;
    }
  }

  // fade
  &-fade-enter-active,
  &-fade-leave-active {
    transition: opacity 0.3s var(--ivue-ease-in-out);
  }

  &-fade-enter-from,
  &-fade-leave-active {
    opacity: 0;
  }
}