@import './theme/default';
@import './theme/font';
@mixin pointer-active {
  @include theme-color(color, primary, 4);
  transform-origin: center center;
  height: 16px;
  width: 16px;
  cursor: pointer;
  &::after {
    @include theme-color(border-color, primary, 4, 0.15);
    border-style: solid;
    border-width: 6px;
    width: 16px;
    height: 16px;
    content: '';
    display: inline-block;
    border-radius: 50%;
    position: absolute;
    left: -8px;
    top: -8px;
  }
}

.zent-slider {
  display: flex;
  align-items: center;
  min-height: 30px;
  padding: 8px 7px;

  &-main {
    // text-700 没有对应语义化
    background-color: rgba(0, 0, 0, 0.05);
    flex: 1;
    height: 14px;
    cursor: pointer;
    position: relative;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-radius: 8px;
    box-sizing: border-box;
    user-select: none;
    background-clip: content-box;

    &:hover {
      .zent-slider-track {
        @include theme-color(background-color, primary, 4);

        &-disabled {
          @include theme-color(background-color, stroke, 4);

          &:hover {
            @include theme-color(background-color, stroke, 4);
          }
        }
      }
    }
  }

  &-track {
    @include theme-color(background-color, primary, 4);
    height: 4px;
    position: absolute;
    border-radius: 8px;

    &:hover {
      @include theme-color(background-color, primary, 4);
    }

    &-disabled {
      @include theme-color(background-color, stroke, 4);

      &:hover {
        @include theme-color(background-color, stroke, 4);
      }
    }
  }

  &-point {
    @include theme-color(border-color, primary, 4);
    @include theme-color(background-color, stroke, 9);
    box-sizing: border-box;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border-width: 2px;
    border-style: solid;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: border-color 0.3s ease, height 0.1s linear, width 0.1s linear,
      transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);

    $prefix: &;

    &:hover:not(#{$prefix}-disabled) {
      height: 16px;
      width: 16px;
    }

    &:active:not(#{$prefix}-disabled) {
      @include pointer-active;
    }

    &-disabled {
      @include theme-color(border-color, stroke, 4);
      border-width: 2px;
      border-style: solid;
      cursor: not-allowed;

      &:hover {
        @include theme-color(border-color, stroke, 4);
        transform: scale(1);
        transform-origin: center center;
      }
    }
  }

  &-tooltip {
    position: absolute;
    cursor: initial;
    z-index: 1;
    top: 50%;
    transform: translate(-50%, -50%);

    &-content {
      @include font-normal;
      @include theme-color(background-color, stroke, 1);
      @include theme-color(color, stroke, 9);
      position: absolute;
      top: -48px;
      padding: 8px 10px;
      border-radius: 2px;
      line-height: 14px;
      z-index: 2;
      white-space: nowrap;
      left: 50%;
      transform: translateX(-50%);
      height: 32px;
      box-sizing: border-box;
      display: none;
    }

    &:after {
      @include theme-color(background-color, stroke, 1);
      content: '';
      transform: translate(-50%, 50%) rotate(45deg);
      width: 8px;
      height: 8px;
      top: -24px;
      position: absolute;
      left: 50%;
      display: none;
    }

    $tooltip: &;

    &-active,
    &:hover {
      #{$tooltip}-content {
        display: block;
      }

      &:after {
        display: block;
      }
    }

    &-active {
      .zent-slider-point {
        @include pointer-active;
      }
    }
  }

  &-input {
    display: flex;
    margin-left: 24px;
    line-height: 30px;

    .slider-input-line {
      padding: 0 5px;
    }

    .zent-input-wrapper,
    &.zent-input-wrapper {
      width: 60px;

      .zent-input {
        min-width: 60px;
      }
    }
  }

  &-mark {
    position: absolute;
    padding-top: 12px;
    transform: translateX(-50%);
    cursor: initial;
  }

  &-dot {
    @include theme-color(background-color, stroke, 9);
    @include theme-color(border-color, stroke, 6);
    position: absolute;
    display: inline-block;
    width: 6px;
    margin-top: -2px;
    transform: translateX(-50%);
    height: 6px;
    border-width: 1px;
    border-style: solid;
    border-radius: 50%;

    &-active {
      @include theme-color(border-color, primary, 6);
      border-width: 1px;
      border-style: solid;
    }
  }

  &-disabled {
    .zent-slider-main {
      cursor: not-allowed;
    }
  }
}