@use "../mixins/function.scss" as *;
@use "../mixins/mixins.scss" as *;

@include b(wheel) {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background-color: getCssVar("color", "bg-2");
  position: relative;
  color: getCssVar("color", "text-1");
  box-sizing: border-box;
  font-size: 14px;
  user-select: none;

  &:hover {
    @include be(wheel, mask-top) {
      background: linear-gradient(
        to bottom,
        getCssVarRgba(0.05, "color", "primary-1") 0%,
        getCssVarRgba(0.3, "color", "primary-3") 100%
      );
    }

    @include be(wheel, mask-bottom) {
      background: linear-gradient(
        to top,
        getCssVarRgba(0.05, "color", "primary-1") 0%,
        getCssVarRgba(0.3, "color", "primary-3") 100%
      );
    }

    @include be(wheel, mask-center) {
      border-top-color: getCssVar("color", "primary-6");
      border-bottom-color: getCssVar("color", "primary-6");
    }
  }

  @include e(arrow) {
    width: 100%;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    user-select: none;
    color: getCssVar("color", "text-2");
    &:hover {
      color: getCssVar("color", "primary-6");
    }
  }

  @include e(list) {
    position: relative;
    overflow: hidden;
    width: 100%;
  }

  @include e(list-inner) {
    transition: transform 0.2s getCssVar("bezier", "1");
    width: 100%;
  }

  @include e(item) {
    padding: 0 12px;
    text-align: center;
    transition: color 0.2s;
    color: getCssVar("color", "text-3");
    width: 100%;

    @include when(active) {
      color: getCssVar("color", "text-1");
      font-weight: 550;
    }
  }

  @include e(mask) {
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    z-index: 1;
  }

  @include e(mask-top) {
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.8) 0%,
      rgba(255, 255, 255, 0.1) 100%
    );
    flex: 0 0 auto;
  }

  @include e(mask-bottom) {
    background: linear-gradient(to top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 100%);
    flex: 0 0 auto;
  }

  @include e(mask-center) {
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: getCssVar("color", "fill-3");
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: getCssVar("color", "fill-3");
    flex: 0 0 auto;
  }
}