@layer components {
.dt-range-slider {
  --dt-range-slider-thumb-size: 16px;
  --dt-range-slider-track-height: 4px;
  --dt-range-slider-fill: var(--portal-accent, var(--dt-color-primary));
  --dt-range-slider-track: var(--dt-palette-gray-200);
  --dt-range-slider-thumb-shadow: color-mix(in srgb, var(--dt-color-on-surface) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 150px;
  max-width: 100%;
  font-family: var(--dt-font-family);
  font-size: var(--dt-typography-desktop-body-3);
  line-height: var(--dt-typography-line-height-body);
  user-select: none;
}
.dt-range-slider__track {
  margin: 0 calc(var(--dt-range-slider-thumb-size) / 2);
}
.dt-range-slider__labels {
  position: relative;
  height: calc(1.4em + 6px);
  container-type: inline-size;
}
.dt-range-slider__label {
  --dt-range-slider-thumb-centre: calc(
  	var(--dt-range-slider-thumb-size) / 2 +
  		var(--dt-range-slider-position) * (100cqw - var(--dt-range-slider-thumb-size))
  );
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(clamp(0px, var(--dt-range-slider-thumb-centre) - 50%, 100cqw - 100%));
  padding: 2px 6px;
  border: 1px solid var(--dt-palette-gray-200);
  border-radius: var(--dt-radius-md);
  background: var(--dt-color-surface);
  color: var(--dt-color-primary);
  white-space: nowrap;
}
.dt-range-slider__control {
  position: relative;
  height: var(--dt-range-slider-thumb-size);
}
.dt-range-slider__track {
  position: absolute;
  inset: 50% 0 auto;
  height: var(--dt-range-slider-track-height);
  transform: translateY(-50%);
  border-radius: calc(var(--dt-range-slider-track-height) / 2);
  background: var(--dt-range-slider-track);
}
.dt-range-slider__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--dt-range-slider-start) * 100%);
  width: calc((var(--dt-range-slider-end) - var(--dt-range-slider-start)) * 100%);
  border-radius: inherit;
  background: var(--dt-range-slider-fill);
}
.dt-range-slider .dt-range-slider__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  appearance: none;
  background: transparent;
  outline: none;
}
.dt-range-slider .dt-range-slider__input::-webkit-slider-runnable-track, .dt-range-slider .dt-range-slider__input:focus::-webkit-slider-runnable-track {
  height: 100%;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.dt-range-slider .dt-range-slider__input::-moz-range-track, .dt-range-slider .dt-range-slider__input::-moz-range-progress {
  height: 100%;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.dt-range-slider .dt-range-slider__input::-webkit-slider-thumb {
  appearance: none;
  box-sizing: border-box;
  width: var(--dt-range-slider-thumb-size);
  height: var(--dt-range-slider-thumb-size);
  border: 0;
  border-radius: 50%;
  background: var(--dt-color-surface);
  box-shadow: 0 1px 3px var(--dt-range-slider-thumb-shadow);
  cursor: grab;
  pointer-events: auto;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.dt-range-slider .dt-range-slider__input::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--dt-range-slider-thumb-size);
  height: var(--dt-range-slider-thumb-size);
  border: 0;
  border-radius: 50%;
  background: var(--dt-color-surface);
  box-shadow: 0 1px 3px var(--dt-range-slider-thumb-shadow);
  cursor: grab;
  pointer-events: auto;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.dt-range-slider .dt-range-slider__input:active::-webkit-slider-thumb {
  background: var(--dt-color-surface-muted);
  box-shadow: 0 1px 1px var(--dt-range-slider-thumb-shadow);
  cursor: grabbing;
}
.dt-range-slider .dt-range-slider__input:active::-moz-range-thumb {
  background: var(--dt-color-surface-muted);
  box-shadow: 0 1px 1px var(--dt-range-slider-thumb-shadow);
  cursor: grabbing;
}
.dt-range-slider .dt-range-slider__input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 1px 3px var(--dt-range-slider-thumb-shadow), 0 0 0 3px color-mix(in srgb, var(--dt-color-primary) 25%, transparent);
}
.dt-range-slider .dt-range-slider__input:focus-visible::-moz-range-thumb {
  box-shadow: 0 1px 3px var(--dt-range-slider-thumb-shadow), 0 0 0 3px color-mix(in srgb, var(--dt-color-primary) 25%, transparent);
}
.dt-range-slider--range .dt-range-slider__input {
  pointer-events: none;
}
.dt-range-slider .dt-range-slider__input--top {
  z-index: 1;
}
.dt-range-slider__bounds {
  display: flex;
  justify-content: space-between;
  color: var(--dt-color-on-surface-muted);
}
.dt-range-slider--disabled {
  opacity: 0.5;
}
.dt-range-slider--disabled .dt-range-slider__input::-webkit-slider-thumb {
  cursor: not-allowed;
}
.dt-range-slider--disabled .dt-range-slider__input::-moz-range-thumb {
  cursor: not-allowed;
}

}