@st-namespace 'Range-st-css';
@st-import [ --wix-color-5, --wix-color-8, --wix-color-29 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ WsrSlider as Slider, WsrSlider__sliderThumb as sliderThumb, WsrSlider__sliderHandle as sliderHandle, WsrSlider__sliderHandleWrapper as sliderHandleWrapper ] from 'wix-style-react-tpa/index.st.css';
@st-import [ createColor, createFont, setColor, setVar, createFontWithOverrides ] from '../../common/formatters.st';
@st-import [ errorColor-rgb ] from '../../common/palette.st.css';
@st-import ErrorMessageWrapper from '../internal/ErrorMessageWrapper/ErrorMessageWrapper.st.css';
@st-import [
  --wst-links-and-actions-color-rgb,
  --wst-paragraph-2-color-rgb,
  --wst-paragraph-2-font,
  --wst-system-disabled-color-rgb,
  --wst-system-error-color-rgb
] from '@wix/wix-site-theme-variables/stylable-variables.st.css';
@property st-global(--wut-error-color);

/*
 * 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);
/*
 * The color representing an disabled slider
 * @type color
 * @default --wix-color-29
 */
@property st-global(--wix-ui-tpa-range-disabled-slider-color);

@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:
    setColor(--wix-ui-tpa-error-message-wrapper-error-color, --wix-ui-tpa-range-error-color, var(--wst-system-error-color-rgb, value(errorColor-rgb))),
    setVar(--wix-ui-tpa-error-message-wrapper-min-message-height, --wix-ui-tpa-range-error-message-min-height);
}

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

.slider :--slider:not(:--slider-disabled) :--slider-track,
.slider :--slider:not(:--slider-disabled) .sliderThumb {
  background-color: createColor(--wix-ui-tpa-range-selected-color, var(--wst-links-and-actions-color-rgb, var(--wix-color-8)));
}

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

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

.slider :--slider-rail {
  background-color: createColor(--wix-ui-tpa-range-track-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)), 0.2);
  margin: 6px 0;
  height: 4px;
  border-radius: var(--wix-ui-tpa-range-track-corner-radius, 0px);
  width: calc(100% + 16px);
  transform: translateX(calc(16px / -2));
}

.slider :--slider-disabled :--slider-rail {
  background-color: createColor(--wix-ui-tpa-range-track-color, var(--wix-color-5), 0.2);
}

.slider :--slider-disabled :--slider-track,
.slider :--slider-disabled .sliderThumb {
  background-color: rgb(var(--wst-system-disabled-color-rgb, var(--wix-color-29)));
}

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

.slider .sliderThumb {
  height: 16px;
  width: 16px;
}

.slider .sliderHandle:not(:disabled) .sliderThumb:hovered {
  background-color: createColor(--wix-ui-tpa-range-selected-color, var(--wix-color-8), 0.6);
  transform: unset;
}

.slider .sliderHandleWrapper:focus-visible .sliderHandle:not(:disabled) .sliderThumb:not(:hovered) {
  background-color: createColor(--wix-ui-tpa-range-selected-color, var(--wix-color-8), 0.6);
  box-shadow: unset;
}

.sliderWrapper {
  padding: 0 8px;
}

.label {
  color: createColor(--wix-ui-tpa-range-label-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "size": "14px" }'),
  createFont((--wix-ui-tpa-range-label-font, --wst-paragraph-2-overriden-font), 'Body-M');
  display: flex;
  align-items: center;
  min-height: 29px;
  padding: 0;
}

.rangeValues {
  display: flex;
  justify-content: space-between;
  color: createColor(--wix-ui-tpa-range-text-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "size": "14px" }'),
  createFont((--wix-ui-tpa-range-text-font, --wst-paragraph-2-overriden-font), 'Body-M');
}

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

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