@import "../lib.less";
@import "../variables/components/slider.less";

.@{veui-prefix}-slider {
  display: flex;
  width: 100%;
  position: relative;
  user-select: none;
  overflow: visible;
  outline: none;
  color: @veui-slider-font-color;

  &-track {
    flex-grow: 1;

    &-default {
      display: flex;
      align-items: center;

      &-progress {
        min-height: @veui-slider-track-min-width;
      }

      &-wrapper {
        position: relative;
        flex-grow: 1;
      }

      &-bg {
        background-color: @veui-slider-track-color;
        cursor: pointer;
        .veui-transition(background-color);
      }

      &-sp,
      &-fg {
        position: absolute;
        top: 0;
      }

      &-sp {
        background-color: @veui-slider-default-color;
      }

      &-fg {
        background-color: @veui-slider-track-progress-color;
        .veui-transition(background-color);
        cursor: pointer;

        &:hover {
          background-color: @veui-slider-track-progress-color-hover;

          &
            ~ .@{veui-prefix}-slider-track-default-marks
            .@{veui-prefix}-slider-track-default-mark-in-progress {
            background-color: @veui-slider-track-progress-color-hover;
          }
        }
      }

      &-marks {
        .absolute(0);
        transform: translateY(50%);
        pointer-events: none;
      }

      &-mark {
        position: absolute;
        transform: translate(-50%, -50%);
        min-width: @veui-slider-mark-min-size;
        min-height: @veui-slider-mark-min-size;
        border-radius: 50%;
        .veui-transition(background-color, transform);
        cursor: pointer;
        pointer-events: all;

        &-in-progress {
          background-color: @veui-slider-track-progress-color;
        }

        &-out-progress {
          background-color: @veui-slider-track-color;
        }

        &::before,
        &::after {
          content: "";
          .absolute(_, 50%, 50%, _);
          border-radius: 50%;
          transform: translate(50%, 50%) scale(0);
          .veui-transition(transform);
        }

        &::before {
          background-color: @veui-slider-thumb-background-color-hover;
          border-radius: 50%;
        }

        &::after {
          min-width: @veui-slider-thumb-dot-min-size;
          min-height: @veui-slider-thumb-dot-min-size;
          background-color: @veui-slider-thumb-dot-color;
        }

        &:hover {
          background-color: @veui-slider-track-progress-color-hover;

          &::before,
          &::after {
            transform: translate(50%, 50%) scale(1);
          }
        }
      }
    }
  }

  &-thumb {
    position: absolute;
    left: 0;
    background: none;
    padding: 0;
    border: none;
    overflow: visible;
    // 利用 translateX 左偏移一半，实现 thumb 宽度自适应
    transform: translateX(-50%);
    cursor: pointer;

    &:focus {
      outline: none;
    }

    &-default {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      border: 1px solid transparent;
      background-color: @veui-slider-thumb-background-color;
      .veui-button-transition();

      &::before {
        content: "";
        min-width: @veui-slider-thumb-dot-min-size;
        min-height: @veui-slider-thumb-dot-min-size;
        background-color: @veui-slider-thumb-dot-color;
        border-radius: 50%;
      }
    }

    &:hover {
      .@{veui-prefix}-slider-thumb-default {
        background-color: @veui-slider-thumb-background-color-hover;
      }
    }

    &.focus-visible {
      .@{veui-prefix}-slider-thumb-default {
        background-color: @veui-slider-thumb-background-color-focus;
        .veui-focus-ring(
          @veui-slider-thumb-border-color-focus,
          @veui-slider-thumb-shadow-focus
        );
      }
    }

    &:active {
      .@{veui-prefix}-slider-thumb-default {
        background-color: @veui-slider-thumb-background-color-active;
      }
    }
  }

  .slider-size(@total-height, @track-height, @track-radius, @thumb-size, @mark-size, @dot-size) {
    .@{veui-prefix}-slider {
      &-track {
        &-default {
          // Slider 高度靠 default track 撑起来，如果替换了 track slot 就高度自适应了
          height: @total-height;

          &-progress {
            height: @track-height;
            border-radius: @track-radius;
          }

          &-mark {
            .size(@mark-size);

            &::before {
              .size(@thumb-size);
            }

            &::after {
              .size(@dot-size);
            }
          }
        }
      }

      &-thumb {
        // track/thumb slot 高度变化需要调整 thumb 的位置
        top: (@total-height - @thumb-size) / 2;

        &-default {
          .size(@thumb-size);

          &::before {
            .size(@dot-size);
          }
        }
      }
    }
  }

  &[ui~="s"] {
    .slider-size(
      veui-line-height(@veui-line-height-m, @veui-slider-font-size-s),
      @veui-slider-track-width-s,
      @veui-slider-track-border-radius,
      @veui-slider-thumb-size-s,
      @veui-slider-mark-size-s,
      @veui-slider-thumb-dot-size-s
    );
  }

  &[ui~="m"] {
    .slider-size(
      veui-line-height(@veui-line-height-m, @veui-slider-font-size-m),
      @veui-slider-track-width-m,
      @veui-slider-track-border-radius,
      @veui-slider-thumb-size-m,
      @veui-slider-mark-size-m,
      @veui-slider-thumb-dot-size-m
    );
  }

  &.@{veui-prefix}-readonly {
    color: @veui-slider-font-color-read-only;

    .@{veui-prefix}-slider-track {
      &-default {
        &-bg,
        &-mark-out-progress {
          background-color: @veui-slider-track-color-read-only;
        }

        &-fg,
        &-mark-in-progress {
          background-color: @veui-slider-track-progress-color-read-only;
        }

        &-bg,
        &-fg,
        &-mark {
          pointer-events: none;
        }
      }
    }

    .@{veui-prefix}-slider-thumb {
      cursor: default;

      &-default {
        background-color: @veui-slider-thumb-background-color-read-only;

        &:hover {
          background-color: @veui-slider-thumb-background-color-read-only-hover;
        }
      }

      &.focus-visible .@{veui-prefix}-slider-thumb-default {
        background-color: @veui-slider-thumb-background-color-read-only-focus;
        .veui-focus-ring(
          @veui-slider-thumb-border-color-read-only-focus,
          @veui-slider-thumb-shadow-read-only-focus
        );
      }
    }
  }

  &.@{veui-prefix}-disabled {
    color: @veui-slider-font-color-disabled;

    .@{veui-prefix}-slider-track {
      &-default {
        &-bg,
        &-mark-out-progress {
          background-color: @veui-slider-track-color-disabled;
        }

        &-fg,
        &-mark-in-progress {
          background-color: @veui-slider-track-progress-color-disabled;
        }

        &-bg,
        &-fg,
        &-mark {
          pointer-events: none;
        }
      }
    }

    .@{veui-prefix}-slider-thumb {
      cursor: not-allowed;

      &-default {
        background-color: @veui-slider-thumb-background-color-disabled;
      }
    }
  }
}