@charset "UTF-8";
@import "./common/var.css";

@component-namespace el {
  @b scrollbar {
    overflow: hidden;
    position: relative;

    &:hover,
    &:active,
    &:focus {
      .el-scrollbar__bar {
        opacity: 1;
        transition: opacity 340ms ease-out;
      }
    }

    @e wrap {
      overflow: scroll;

      @m hidden-default {
        &::-webkit-scrollbar {
          width: 0;
          height: 0;
        }
      }
    }

    @e thumb {
      position: relative;
      display: block;
      size: 0;
      cursor: pointer;
      border-radius: inherit;
      background-color: var(--scrollbar-background-color);
      transition: .3s background-color;

      &:hover {
        background-color: var(--scrollbar-hover-background-color);
      }
    }

    @e bar {
      position: absolute;
      right: 2px;
      bottom: 2px;
      z-index: 1;
      border-radius: 4px;
      opacity: 0;
      transition: opacity 120ms ease-out;

      @when vertical {
        width: 6px;
        top: 2px;

        > div {
          width: 100%;
        }
      }

      @when horizontal {
        height: 6px;
        left: 2px;

        > div {
          height: 100%;
        }
      }
    }
  }
}