@use "sass:map";
@use "sass:list";
@use '../helpers/baseMixin.scss';

$sliderThemeList: (
  (
    name: "primary",
    textColor: var(--vxe-ui-font-primary-color),
    hoverColor: var(--vxe-ui-font-primary-lighten-color),
    activeColor: var(--vxe-ui-font-primary-darken-color),
    disabledColor: var(--vxe-ui-font-primary-disabled-color)
  ),
  (
    name: "success",
    textColor: var(--vxe-ui-status-success-color),
    hoverColor: var(--vxe-ui-status-success-lighten-color),
    activeColor: var(--vxe-ui-status-success-darken-color),
    disabledColor: var(--vxe-ui-status-success-disabled-color)
  ),
  (
    name: "info",
    textColor: var(--vxe-ui-status-info-color),
    hoverColor: var(--vxe-ui-status-info-lighten-color),
    activeColor: var(--vxe-ui-status-info-darken-color),
    disabledColor: var(--vxe-ui-status-info-disabled-color)
  ),
  (
    name: "warning",
    textColor: var(--vxe-ui-status-warning-color),
    hoverColor: var(--vxe-ui-status-warning-lighten-color),
    activeColor: var(--vxe-ui-status-warning-darken-color),
    disabledColor: var(--vxe-ui-status-warning-disabled-color)
  ),
  (
    name: "danger",
    textColor: var(--vxe-ui-status-danger-color),
    hoverColor: var(--vxe-ui-status-danger-lighten-color),
    activeColor: var(--vxe-ui-status-danger-darken-color),
    disabledColor: var(--vxe-ui-status-danger-disabled-color)
  ),
  (
    name: "error",
    textColor: var(--vxe-ui-status-error-color),
    hoverColor: var(--vxe-ui-status-error-lighten-color),
    activeColor: var(--vxe-ui-status-error-darken-color),
    disabledColor: var(--vxe-ui-status-error-disabled-color)
  )
);

.vxe-slider {
  position: relative;
  display: block;
  padding: 0.5em 1em;
  @for $index from 0 to list.length($sliderThemeList) {
    $item: list.nth($sliderThemeList, $index + 1);
    &.theme--#{map.get($item, name)} {
      .vxe-slider--bar-track {
        background-color: map.get($item, textColor);
        &:hover {
          background-color: map.get($item, hoverColor);
        }
        &:hover {
          background-color: map.get($item, activeColor);
        }
      }
      .vxe-slider--bar-btn {
        background-color: map.get($item, textColor);
      }
    }
  }
  &.is--disabled {
    .vxe-slider--bar-btn {
      cursor: not-allowed;
    }
  }
  &:not(.is--disabled) {
    .vxe-slider--bar-wrapper,
    .vxe-slider--inner {
      cursor: pointer;
    }
    .vxe-slider--bar-btn {
      &:hover {
        transform: scale(1.2);
      }
      &:active {
        transform: scale(1.1);
      }
    }
  }
  &.is--readonly {
    .vxe-slider--bar-wrapper,
    .vxe-slider--inner {
      cursor: default;
    }
  }
}
.vxe-slider--inner {
  position: relative;
}

.vxe-slider--bar-wrapper {
  background-color: #e4e7ed;
}
.vxe-slider--bar-track {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  background-color: var(--vxe-ui-font-primary-color);
  &:hover {
    background-color: var(--vxe-ui-font-primary-lighten-color);
  }
  &:active {
    background-color: var(--vxe-ui-font-primary-darken-color);
  }
}
.vxe-slider--bar-wrapper,
.vxe-slider--bar-track {
  height: 0.3em;
  border-radius: var(--vxe-ui-base-border-radius);
}

.vxe-slider--bar-btn {
  position: absolute;
  width: 0.9em;
  height: 0.9em;
  top: -0.3em;
  border-radius: 50%;
  border: 0.15em solid  var(--vxe-ui-font-primary-color);
  background-color: #fff;
  cursor: pointer;
  z-index: 1;
  @include baseMixin.createAnimationTransition(transform, 0.1s);
}
.vxe-slider--start-btn {
  left: -0.45em;
}
.vxe-slider--end-btn {
  right: -0.45em;
}