@st-namespace 'Range-deprecated-st-css';
@property st-global(--wut-error-color);

:import {
  -st-from: "wix-style-react-tpa/index.es.st.css";
  -st-named: WsrSlider as Slider, WsrSlider__sliderThumb as sliderThumb, WsrSlider__sliderHandle as sliderHandle, WsrSlider__sliderHandleWrapper as sliderHandleWrapper;
}

:import {
  -st-from: "../../common/formatters.st";
  -st-named: color, font, fallback, unit, applyOpacity;
}

:import {
  -st-from: "../../common/palette.st.css";
  -st-named: errorColor as defaultErrorColor;
}

:import {
  -st-from: '../internal/ErrorMessageWrapper/ErrorMessageWrapper.deprecated.st.css';
  -st-default: ErrorMessageWrapper;
}

/* Defaults */
:vars {
  defaultTrackColor: color(color-5);
  defaultTrackCornerRadius: 0;
  defaultSelectedColor: color(color-8);
  defaultTextFont: font("{theme: 'Body-M', size: '14px'}");
  defaultTextColor: color(color-5);
  defaultLabelFont: font("{theme: 'Body-M', size: '14px'}");
  defaultLabelColor: color(color-5);
  DefaultErrorColor: value(defaultErrorColor);
}

/* Overrides */
:vars {

  /*
      Track Color (0.2 opacity is applied to any color provided)
      @default color-5
  */
  TrackColor: --overridable;
  /*
      Track Corner Radius
      @default 0
  */
  TrackCornerRadius: --overridable;
  /*
      Selected Color
      @default color-8
  */
  SelectedColor: --overridable;
  /*
      Text Font
      @default {theme: 'Body-M', size: '14px'}
  */
  TextFont: --overridable;
  /*
      Text Color
      @default color-5
  */
  TextColor: --overridable;
  /*
      Label Font
      @default {theme: 'Body-M', size: '14px'}
  */
  LabelFont: --overridable;
  /*
      Label Color
      @default color-5
  */
  LabelColor: --overridable;
  /*
      The color representing an error
      @default #DF3131
  */
  ErrorColor: --overridable;
  /*
      A minimum height for the error message element
  */
  ErrorMessageMinHeight: --overridable;
}
/*
 * Track Color (0.2 opacity is applied to any color provided)
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-range-track-color);
/*
 * Track Corner Radius
 * @type size
 * @default 0
 */
@property st-global(--wix-ui-tpa-range-track-corner-radius);
/*
 * Selected Color
 * @type color
 * @default --wix-color-8
 */
@property st-global(--wix-ui-tpa-range-selected-color);
/*
 * Text Font
 * @type font
 * @default preset: 'Body-M' | overrides: { size: '14px'}
 */
@property st-global(--wix-ui-tpa-range-text-font);
/*
 * Text Color
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-range-text-color);
/*
 * Label Font
 * @type font
 * @default preset: 'Body-M' | overrides: { size: '14px'}
 */
@property st-global(--wix-ui-tpa-range-label-font);
/*
 * Label Color
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-range-label-color);
/*
 * The color representing an error
 * @type color
 * @default #DF3131
 */
@property st-global(--wix-ui-tpa-range-error-color);
/*
 * A minimum height for the error message element
 * @type size
 */
@property st-global(--wix-ui-tpa-range-error-message-min-height);

:vars {
  trackColor: color(fallback(value(TrackColor), value(defaultTrackColor)));
  trackCornerRadius: unit(fallback(value(TrackCornerRadius), value(defaultTrackCornerRadius)), px);
  selectedColor: color(fallback(value(SelectedColor), value(defaultSelectedColor)));
  textFont: font(fallback(value(TextFont), value(defaultTextFont)));
  textColor: color(fallback(value(TextColor), value(defaultTextColor)));
  labelFont: font(fallback(value(LabelFont), value(defaultLabelFont)));
  labelColor: color(fallback(value(LabelColor), value(defaultLabelColor)));
  selectedDisabledColor: color(color-3);
  thumbHeight: 16px;
  thumbWidth: 16px;
  mainErrorColor: color(fallback(value(ErrorColor), value(DefaultErrorColor)));
}

@custom-selector :--slider :global(.wsr-slider);
@custom-selector :--slider-disabled :global(.wsr-slider-disabled);
@custom-selector :--slider-rail :global(.wsr-slider-rail);
@custom-selector :--slider-track :global(.wsr-slider-track);

.root {
  -st-states: error;
}

.container {
  margin: 0;
  padding: 0;
  border: none;
}

.root:error {
  -st-mixin: ErrorMessageWrapper(
      ErrorColor value(mainErrorColor),
      MinMessageHeight unit(value(ErrorMessageMinHeight), px)
  );
}

.slider {
  -st-extends: Slider;
  -st-states: rtl;
}

.slider :--slider:not(:--slider-disabled) :--slider-track,
.slider :--slider:not(:--slider-disabled) .sliderThumb {
  background-color: value(selectedColor);
}

.root:error .slider :--slider:not(:--slider-disabled) :--slider-track,
.root:error .slider :--slider:not(:--slider-disabled) .sliderThumb {
  background-color: var(--wut-error-color, value(DefaultErrorColor)) !important;
}

.slider :--slider-track {
  margin: 6px 0;
  height: 4px;
}

.slider :--slider-rail {
  background-color: applyOpacity(value(trackColor), 0.2);
  margin: 6px 0;
  height: 4px;
  border-radius: value(trackCornerRadius);
  width: calc(100% + value(thumbWidth));
  transform: translateX(calc(value(thumbWidth) / -2));
}

.slider :--slider-disabled :--slider-rail {
  background-color: applyOpacity(value(trackColor), 0.2);
}

.slider :--slider-disabled :--slider-track,
.slider :--slider-disabled .sliderThumb  {
  background-color: value(selectedDisabledColor);
}

.slider .sliderHandle {
  background-color: #FFF;
  border-radius: 50%;
}

.slider .sliderThumb {
  height: value(thumbHeight);
  width: value(thumbWidth);
}

.slider .sliderHandle:not(:disabled) .sliderThumb:hovered {
  background-color: applyOpacity(value(selectedColor), 0.6);
  transform: unset;
}

.slider .sliderHandleWrapper:focus-visible .sliderHandle:not(:disabled) .sliderThumb:not(:hovered) {
  background-color: applyOpacity(value(selectedColor), 0.6);
  box-shadow: unset;
}

.sliderWrapper {
  padding: 0 8px;
}

.label {
  color: value(labelColor);
  font: value(labelFont);
  display: flex;
  align-items: center;
  min-height: 29px;
  padding: 0;
}

.rangeValues {
  display: flex;
  justify-content: space-between;
  color: value(textColor);
  font: value(textFont);
}

/* rtl */
.slider:rtl :--slider-rail {
  transform: translateX(calc(value(thumbWidth) / 2));
}

/* st-namespace-reference="../../../../src/components/Range/Range.deprecated.st.css" */