/*
 * Copyright (c) 2026, Salesforce, Inc.,
 * All rights reserved.
 * For full license text, see the LICENSE.txt file
 */

.slds-slider {
  display: flex;
  position: relative;
  height: 1lh; /* Size height in accordance with text content */
}

.slds-slider .slds-slider__range {
  appearance: none;
  width: 100%;
  background-color: transparent;
  border-radius: var(--slds-c-slider-radius-border);
  cursor: pointer;
}

.slds-slider .slds-slider__range:focus {
  outline: 0;
}

.slds-slider .slds-slider__range[disabled] {
  cursor: default;
  pointer-events: none;
}

/* Thumb */
/* Note: thumb / track pseudo selectors can't be combined; declare separately. */
.slds-slider .slds-slider__range::-webkit-slider-thumb {
  appearance: none;
  width: var(--slds-c-slider-thumb-size);
  height: var(--slds-c-slider-thumb-size);
  border-radius: var(--slds-c-slider-thumb-radius-border);
  background-color: var(--slds-c-slider-thumb-color-background);
  border: 0;
  box-shadow: var(--slds-c-slider-thumb-shadow);
  transition: background-color 0.15s ease-in-out;
  /* Centers thumb on track: offset by half the size difference */
  margin-top: calc((var(--slds-c-slider-thumb-size) / 2 - var(--slds-c-slider-track-size) / 2) * -1);
}

.slds-slider .slds-slider__range::-moz-range-thumb {
  appearance: none;
  width: var(--slds-c-slider-thumb-size);
  height: var(--slds-c-slider-thumb-size);
  border-radius: var(--slds-c-slider-thumb-radius-border);
  background-color: var(--slds-c-slider-thumb-color-background);
  border: 0;
  box-shadow: var(--slds-c-slider-thumb-shadow);
  transition: background-color 0.15s ease-in-out;
}

.slds-slider .slds-slider__range:hover::-webkit-slider-thumb {
  background-color: var(--slds-c-slider-thumb-color-background-hover);
}
.slds-slider .slds-slider__range:hover::-moz-range-thumb {
  background-color: var(--slds-c-slider-thumb-color-background-hover);
}

.slds-slider .slds-slider__range:focus-visible::-webkit-slider-thumb {
  background-color: var(--slds-c-slider-thumb-color-background-focus);
  box-shadow: var(--slds-c-slider-thumb-shadow-focus);
}
.slds-slider .slds-slider__range:focus-visible::-moz-range-thumb {
  background-color: var(--slds-c-slider-thumb-color-background-focus);
  box-shadow: var(--slds-c-slider-thumb-shadow-focus);
}

.slds-slider .slds-slider__range:active::-webkit-slider-thumb {
  background-color: var(--slds-c-slider-thumb-color-background-active);
}
.slds-slider .slds-slider__range:active::-moz-range-thumb {
  background-color: var(--slds-c-slider-thumb-color-background-active);
}

.slds-slider .slds-slider__range[disabled]::-webkit-slider-thumb {
  background-color: var(--slds-c-slider-thumb-color-background-disabled);
}
.slds-slider .slds-slider__range[disabled]::-moz-range-thumb {
  background-color: var(--slds-c-slider-thumb-color-background-disabled);
}

/* Track */
.slds-slider .slds-slider__range::-webkit-slider-runnable-track {
  width: 100%;
  height: var(--slds-c-slider-track-size);
  background-color: var(--slds-c-slider-track-color-background);
  border-radius: var(--slds-c-slider-track-radius-border);
}

.slds-slider .slds-slider__range::-moz-range-track {
  width: 100%;
  height: var(--slds-c-slider-track-size);
  background-color: var(--slds-c-slider-track-color-background);
  border-radius: var(--slds-c-slider-track-radius-border);
}

.slds-slider .slds-slider__range[disabled]::-webkit-slider-runnable-track {
  background-color: var(--slds-c-slider-track-color-background-disabled);
}
.slds-slider .slds-slider__range[disabled]::-moz-range-track {
  background-color: var(--slds-c-slider-track-color-background-disabled);
}

/* Value display */
.slds-slider .slds-slider__value {
  padding-inline-start: var(
    --slds-c-slider-value-spacing-inline-start,
    var(--slds-c-slider-value-spacing-inline)
  );
  padding-inline-end: var(
    --slds-c-slider-value-spacing-inline-end,
    var(--slds-c-slider-value-spacing-inline)
  );
}

.slds-slider .slds-slider-label__label {
  display: block;
}

/* Vertical modifier (Rule 5: root-anchored compound) */
.slds-slider.slds-slider_vertical {
  flex-direction: column;
  align-items: center;
  height: var(--slds-c-slider-vertical-sizing-height);
  width: max(var(--slds-c-slider-track-size), var(--slds-c-slider-thumb-size));
}

.slds-slider.slds-slider_vertical .slds-slider__range {
  writing-mode: vertical-lr;
  direction: rtl;
  flex: 1;
  height: 100%;
  width: var(--slds-c-slider-track-size);
}

.slds-slider.slds-slider_vertical .slds-slider__value {
  padding-inline: 0;
  padding-block-start: var(--slds-c-slider-value-spacing-inline);
}

.slds-slider.slds-slider_vertical .slds-slider__range::-webkit-slider-thumb {
  /* RTL: physical — vertical slider thumb centering, physical axis */
  margin-top: 0;
  margin-left: calc((var(--slds-c-slider-thumb-size) / 2 - var(--slds-c-slider-track-size) / 2) * -1);
}

.slds-slider.slds-slider_vertical .slds-slider__range::-moz-range-thumb {
  /* RTL: physical — vertical slider thumb centering, physical axis */
  margin-top: 0;
  margin-left: calc((var(--slds-c-slider-thumb-size) / 2 - var(--slds-c-slider-track-size) / 2) * -1);
}