@import '../styles/triangle.scss';

$themeColor: #69c0ff;
$themeColor-silent: #91d5ff;
$hoverColor: #1890ff;
$focusColor: #46a6ff;
$focusShadowColor: #8cc8ff;
$stepColor: #e8e8e8;
$bgColor-silent: #f5f5f5;
$bgColor: #e1e1e1;
$disabledColor: #a7a7a7;
$tooltipGap: 10px;
$tooltipBgColor: rgba(0, 0, 0, 0.75);
$tooltipColor: #fff;

// component style
.vue-slider-disabled {
  .vue-slider-process {
    background-color: $disabledColor;
  }
  .vue-slider-dot-handle {
    border-color: $disabledColor;
  }
  .vue-slider-mark-step {
    &-active {
      box-shadow: 0 0 0 2px $disabledColor;
    }
  }
}

// rail style
.vue-slider-rail {
  background-color: $bgColor-silent;
  border-radius: 15px;
  transition: background-color 0.3s;
  @at-root .vue-slider:hover & {
    background-color: $bgColor;
  }
}

// process style
.vue-slider-process {
  background-color: $themeColor-silent;
  border-radius: 15px;
  transition: background-color 0.3s;
  @at-root .vue-slider:hover & {
    background-color: $themeColor;
  }
}

// mark style
.vue-slider-mark {
  @at-root &-step {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 0 0 2px $stepColor;
    background-color: #fff;

    &-active {
      box-shadow: 0 0 0 2px $themeColor-silent;
      @at-root .vue-slider:hover & {
        box-shadow: 0 0 0 2px $themeColor;
      }
    }
  }

  @at-root &-label {
    font-size: 12px;
    white-space: nowrap;

    &-active {
    }
  }
}

// dot style
.vue-slider-dot {
  @at-root &-handle {
    cursor: pointer;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid $themeColor-silent;
    box-sizing: border-box;
    transition: box-shadow 0.3s, border-color 0.3s;

    @at-root .vue-slider:hover & {
      border-color: $themeColor;
    }
    @at-root &-focus {
      border-color: $focusColor;
      box-shadow: 0 0 0 5px $focusShadowColor;
      @at-root .vue-slider:hover & {
        border-color: $focusColor;
      }
    }
    @at-root &:hover {
      border-color: $hoverColor;
      @at-root .vue-slider:hover & {
        border-color: $hoverColor;
      }
    }
    @at-root &-disabled {
      cursor: not-allowed;
      border: 2px solid #ddd;
    }
  }

  @at-root &-tooltip {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;

    @at-root &-inner {
      font-size: 14px;
      white-space: nowrap;
      padding: 6px 8px;
      text-align: left;
      color: $tooltipColor;
      border-radius: 5px;
      border-color: $tooltipBgColor;
      background-color: $tooltipBgColor;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      @include arrow(10px, inherit);

      transform: scale(0.9);
      transition: transform 0.3s;
      &-top {
        transform-origin: 50% 100%;
      }
      &-bottom {
        transform-origin: 50% 0;
      }
      &-left {
        transform-origin: 100% 50%;
      }
      &-right {
        transform-origin: 0% 50%;
      }
    }

    @at-root .vue-slider-dot:hover &,
      &-show {
      opacity: 1;
      visibility: visible;
      .vue-slider-dot-tooltip-inner {
        transform: scale(1);
      }
    }
  }
}