.yc-scrollbar {
  position: relative;
  overflow: hidden;

  &:hover .yc-scrollbar-track {
    .yc-scrollbar-thumb-bar {
      opacity: 1;
    }
  }
  .yc-scrollbar-container {
    overflow: auto;
    .yc-scrollbar-content {
      height: fit-content;
      width: fit-content;
      min-width: 100%;
    }
  }
  &:not(.yc-scrollbar-real) {
    .yc-scrollbar-container {
      &::-webkit-scrollbar {
        width: 0;
        height: 0;
      }
    }
  }
}
// 双向轨道
.yc-scrollbar-both-track {
  &::before {
    z-index: 9999;
    position: absolute;
    right: 0;
    bottom: 0;
    content: '';
    width: 15px;
    height: 15px;
    background-color: var(--color-neutral-1);
    border-right: 1px solid var(--color-neutral-3);
    border-bottom: 1px solid var(--color-neutral-3);
  }
}
// 横向
.yc-scrollbar-vertical-track {
  .yc-scrollbar-container {
    padding-right: 15px;
  }
  .yc-scrollbar-track-direction-vertical {
    background-color: var(--color-neutral-1);
    border-left: 1px solid var(--color-neutral-3);
    border-right: 1px solid var(--color-neutral-3);
  }
}
// 纵向
.yc-scrollbar-horizontal-track {
  .yc-scrollbar-container {
    padding-bottom: 15px;
  }
  .yc-scrollbar-track-direction-horizontal {
    background-color: var(--color-neutral-1);
    border-top: 1px solid var(--color-neutral-3);
    border-bottom: 1px solid var(--color-neutral-3);
  }
}
// track
.yc-scrollbar-track {
  z-index: 11;
  position: absolute;

  .yc-scrollbar-thumb {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    .yc-scrollbar-thumb-bar {
      user-select: none;
      border-radius: 5px;
      background-color: var(--color-neutral-4);
      opacity: 0;
      transition: opacity 0.2s ease;
      &:hover {
        background-color: var(--color-neutral-6);
        opacity: 0.8;
      }
      &.yc-scrollbar-thumb-bar-dragging {
        background-color: var(--color-neutral-6);
        opacity: 0.8;
      }
      &.yc-scrollbar-thumb-bar-hover {
        opacity: 1;
      }
    }
  }
}
// track-dir
.yc-scrollbar-track-direction-vertical {
  width: 15px;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  .yc-scrollbar-thumb-direction-vertical {
    width: 100%;
    .yc-scrollbar-thumb-bar {
      height: 100%;
      width: 9px;
    }
  }
}
.yc-scrollbar-track-direction-horizontal {
  height: 15px;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  .yc-scrollbar-thumb-direction-horizontal {
    height: 100%;
    .yc-scrollbar-thumb-bar {
      width: 100%;
      height: 9px;
    }
  }
}
