@ardium-ui/ui 5.0.0-alpha.75 → 5.0.0-alpha.77

package/prebuilt-themes/default/slider.css

@@ -1,402 +1,402 @@
-:root {
-  --ard-slider-width: 100%;
-  --ard-slider-padding: 0 calc(var(--ard-slider-handle-size, 1.25em) / 2);
-  --ard-slider-track-height: 0.25em;
-  --ard-slider-track-opacity: 20%;
-  --ard-slider-track-border-radius: 9999px;
-  --ard-slider-active-track-height: calc(100% + 0.125em);
-  --ard-slider-active-track-opacity: 100%;
-  --ard-slider-value-tick-size: 0.125em;
-  --ard-slider-value-tick-opacity: 30%;
-  --ard-slider-track-hitbox-size: calc(var(--ard-slider-handle-size, 1.25em) / 2);
-  --ard-slider-handle-size: 1.25em;
-  --ard-slider-handle-border: none;
-  --ard-slider-handle-border-radius: 9999px;
-  --ard-slider-handle-hitbox-size: 0.375em;
-  --ard-slider-handle-overlay-size: 0.5em;
-  --ard-slider-handle-overlay-hover-opacity: 7.5%;
-  --ard-slider-handle-overlay-focus-opacity: 15%;
-  --ard-slider-handle-overlay-active-opacity: 25%;
-  --ard-slider-label-font-size: 0.875rem;
-  --ard-slider-label-padding-top: 0.2em;
-  --ard-slider-label-height: 2em;
-  --ard-slider-label-border: none;
-  --ard-slider-label-border-radius: 0.375em;
-  --ard-slider-label-padding: 0 0.75em;
-  --ard-slider-label-font-weight: 500;
-  --ard-slider-label-arrow-size: 0.375em;
-  --ard-slider-label-offset: 0.5em;
-}
-
-.ard-slider-container-master,
-.ard-range-slider-container-master {
-  position: relative;
-  font-size: var(--ard-slider-font-size, var(--ard-form-field-font-size, 1rem));
-  width: var(--ard-slider-width, 100%);
-  max-width: 100%;
-  padding: var(--ard-slider-padding, 0 calc(var(--ard-slider-handle-size, 1.25em) / 2));
-  display: flex;
-  flex-direction: column;
-}
-.ard-slider-container-master.ard-color-none,
-.ard-range-slider-container-master.ard-color-none {
-  --ard-cmpcl--bg: var(--ard-bg);
-  --ard-cmpcl--bg-colored: var(--ard-bg-alt);
-  --ard-cmpcl--bg-colored-light: var(--ard-detail-light);
-  --ard-cmpcl--bg-header: var(--ard-bg-filled);
-  --ard-cmpcl--bg-colored-verylight: var(--ard-bg-darker);
-  --ard-cmpcl--on-bg: var(--ard-text);
-  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
-  --ard-cmpcl--on-bg-colored-light: var(--ard-text);
-  --ard-cmpcl--border: var(--ard-text);
-  --ard-cmpcl--border-light: var(--ard-text2);
-  --ard-cmpcl--content: var(--ard-text);
-  --ard-cmpcl--content-light: var(--ard-text-alt);
-  --ard-cmpcl--overlay-rgb: var(--ard-overlay-rgb);
-  --ard-cmpcl--overlay: var(--ard-overlay);
-  --ard-cmpcl--overlay-colored: var(--ard-overlay);
-  --ard-cmpcl--overlay-colored-light: var(--ard-text-alt);
-}
-.ard-slider-container-master.ard-color-primary,
-.ard-range-slider-container-master.ard-color-primary {
-  --ard-cmpcl--bg: rgb(var(--ard-primary-500));
-  --ard-cmpcl--bg-colored: rgb(var(--ard-primary-500));
-  --ard-cmpcl--bg-colored-light: rgb(var(--ard-primary-100));
-  --ard-cmpcl--bg-header: rgb(var(--ard-primary-100));
-  --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-primary-50));
-  --ard-cmpcl--on-bg: var(--ard-text-alt);
-  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
-  --ard-cmpcl--on-bg-colored-light: var(--ard-text);
-  --ard-cmpcl--border: rgb(var(--ard-primary-300));
-  --ard-cmpcl--border-light: rgb(var(--ard-primary-100));
-  --ard-cmpcl--content: rgb(var(--ard-primary-700));
-  --ard-cmpcl--content-light: rgb(var(--ard-primary-300));
-  --ard-cmpcl--overlay-rgb: var(--ard-primary-500);
-  --ard-cmpcl--overlay: var(--ard-overlay);
-  --ard-cmpcl--overlay-colored: rgb(var(--ard-primary-700));
-  --ard-cmpcl--overlay-colored-light: rgb(var(--ard-primary-100));
-}
-.ard-slider-container-master.ard-color-secondary,
-.ard-range-slider-container-master.ard-color-secondary {
-  --ard-cmpcl--bg: rgb(var(--ard-secondary-500));
-  --ard-cmpcl--bg-colored: rgb(var(--ard-secondary-500));
-  --ard-cmpcl--bg-colored-light: rgb(var(--ard-secondary-50));
-  --ard-cmpcl--bg-header: rgb(var(--ard-secondary-50));
-  --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-secondary-50));
-  --ard-cmpcl--on-bg: var(--ard-text-alt);
-  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
-  --ard-cmpcl--on-bg-colored-light: var(--ard-text);
-  --ard-cmpcl--border: rgb(var(--ard-secondary-300));
-  --ard-cmpcl--border-light: rgb(var(--ard-secondary-100));
-  --ard-cmpcl--content: rgb(var(--ard-secondary-700));
-  --ard-cmpcl--content-light: rgb(var(--ard-secondary-300));
-  --ard-cmpcl--overlay-rgb: var(--ard-secondary-500);
-  --ard-cmpcl--overlay: var(--ard-overlay);
-  --ard-cmpcl--overlay-colored: rgb(var(--ard-secondary-700));
-  --ard-cmpcl--overlay-colored-light: rgb(var(--ard-secondary-100));
-}
-.ard-slider-container-master.ard-color-warn,
-.ard-range-slider-container-master.ard-color-warn {
-  --ard-cmpcl--bg: rgb(var(--ard-warn-500));
-  --ard-cmpcl--bg-colored: rgb(var(--ard-warn-500));
-  --ard-cmpcl--bg-colored-light: rgb(var(--ard-warn-50));
-  --ard-cmpcl--bg-header: rgb(var(--ard-warn-50));
-  --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-warn-50));
-  --ard-cmpcl--on-bg: var(--ard-text-alt);
-  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
-  --ard-cmpcl--on-bg-colored-light: var(--ard-text);
-  --ard-cmpcl--border: rgb(var(--ard-warn-300));
-  --ard-cmpcl--border-light: rgb(var(--ard-warn-100));
-  --ard-cmpcl--content: rgb(var(--ard-warn-700));
-  --ard-cmpcl--content-light: rgb(var(--ard-warn-100));
-  --ard-cmpcl--overlay-rgb: var(--ard-warn-500);
-  --ard-cmpcl--overlay: var(--ard-overlay);
-  --ard-cmpcl--overlay-colored: rgb(var(--ard-warn-700));
-  --ard-cmpcl--overlay-colored-light: rgb(var(--ard-warn-100));
-}
-.ard-slider-container-master.ard-color-danger,
-.ard-range-slider-container-master.ard-color-danger {
-  --ard-cmpcl--bg: rgb(var(--ard-danger-700));
-  --ard-cmpcl--bg-colored: rgb(var(--ard-danger-700));
-  --ard-cmpcl--bg-colored-light: rgb(var(--ard-danger-100));
-  --ard-cmpcl--bg-header: rgb(var(--ard-danger-100));
-  --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-danger-50));
-  --ard-cmpcl--on-bg: var(--ard-text-alt);
-  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
-  --ard-cmpcl--on-bg-colored-light: var(--ard-text);
-  --ard-cmpcl--border: rgb(var(--ard-danger-300));
-  --ard-cmpcl--border-light: rgb(var(--ard-danger-100));
-  --ard-cmpcl--content: rgb(var(--ard-danger-900));
-  --ard-cmpcl--content-light: rgb(var(--ard-danger-500));
-  --ard-cmpcl--overlay-rgb: var(--ard-danger-700);
-  --ard-cmpcl--overlay: var(--ard-overlay);
-  --ard-cmpcl--overlay-colored: rgb(var(--ard-danger-700));
-  --ard-cmpcl--overlay-colored-light: rgb(var(--ard-danger-300));
-}
-.ard-slider-container-master.ard-color-success,
-.ard-range-slider-container-master.ard-color-success {
-  --ard-cmpcl--bg: rgb(var(--ard-success-700));
-  --ard-cmpcl--bg-colored: rgb(var(--ard-success-700));
-  --ard-cmpcl--bg-colored-light: rgb(var(--ard-success-50));
-  --ard-cmpcl--bg-header: rgb(var(--ard-success-50));
-  --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-success-50));
-  --ard-cmpcl--on-bg: var(--ard-text-alt);
-  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
-  --ard-cmpcl--on-bg-colored-light: var(--ard-text);
-  --ard-cmpcl--border: rgb(var(--ard-success-300));
-  --ard-cmpcl--border-light: rgb(var(--ard-success-100));
-  --ard-cmpcl--content: rgb(var(--ard-success-900));
-  --ard-cmpcl--content-light: rgb(var(--ard-success-300));
-  --ard-cmpcl--overlay-rgb: var(--ard-success-700);
-  --ard-cmpcl--overlay: var(--ard-overlay);
-  --ard-cmpcl--overlay-colored: rgb(var(--ard-success-700));
-  --ard-cmpcl--overlay-colored-light: rgb(var(--ard-success-300));
-}
-.ard-slider-container-master.ard-color-info,
-.ard-range-slider-container-master.ard-color-info {
-  --ard-cmpcl--bg: rgb(var(--ard-info-500));
-  --ard-cmpcl--bg-colored: rgb(var(--ard-info-500));
-  --ard-cmpcl--bg-colored-light: rgb(var(--ard-info-50));
-  --ard-cmpcl--bg-header: rgb(var(--ard-info-50));
-  --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-info-50));
-  --ard-cmpcl--on-bg: var(--ard-text-alt);
-  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
-  --ard-cmpcl--on-bg-colored-light: var(--ard-text);
-  --ard-cmpcl--border: rgb(var(--ard-info-300));
-  --ard-cmpcl--border-light: rgb(var(--ard-info-100));
-  --ard-cmpcl--content: rgb(var(--ard-info-700));
-  --ard-cmpcl--content-light: rgb(var(--ard-info-300));
-  --ard-cmpcl--overlay-rgb: var(--ard-info-500);
-  --ard-cmpcl--overlay: var(--ard-overlay);
-  --ard-cmpcl--overlay-colored: rgb(var(--ard-info-700));
-  --ard-cmpcl--overlay-colored-light: rgb(var(--ard-info-100));
-}
-.ard-slider-container-master.ard-color-currentColor,
-.ard-range-slider-container-master.ard-color-currentColor {
-  --ard-cmpcl--bg: var(--ard-bg);
-  --ard-cmpcl--bg-colored: currentColor;
-  --ard-cmpcl--on-bg: currentColor;
-  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
-  --ard-cmpcl--border: currentColor;
-  --ard-cmpcl--border-light: currentColor;
-  --ard-cmpcl--content: currentColor;
-  --ard-cmpcl--content-light: currentColor;
-  --ard-cmpcl--overlay-rgb: var(--ard-overlay-rgb);
-  --ard-cmpcl--overlay: var(--ard-overlay);
-  --ard-cmpcl--overlay-colored: currentColor;
-  --ard-cmpcl--overlay-colored-light: currentColor;
-}
-.ard-slider-container-master.ard-compact,
-.ard-range-slider-container-master.ard-compact {
-  font-size: var(--ard-slider-font-size-compact, var(--ard-form-field-font-size-compact, 0.875rem));
-}
-.ard-slider-container-master.ard-compact .ard-slider-container > .ard-slider-handle,
-.ard-range-slider-container-master.ard-compact .ard-slider-container > .ard-slider-handle {
-  font-size: 0.95em;
-}
-.ard-slider-container-master .ard-slider-container,
-.ard-range-slider-container-master .ard-slider-container {
-  display: flex;
-  align-items: center;
-  position: relative;
-  width: 100%;
-  height: var(--ard-slider-handle-size, 1.25em);
-  cursor: pointer;
-}
-.ard-slider-container-master .ard-slider-track,
-.ard-range-slider-container-master .ard-slider-track {
-  width: 100%;
-  height: var(--ard-slider-track-height, 0.25em);
-  background: var(--ard-bg);
-}
-.ard-slider-container-master .ard-slider-track .ard-slider-track-overlay,
-.ard-range-slider-container-master .ard-slider-track .ard-slider-track-overlay {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background: var(--ard-slider-track-color, var(--ard-cmpcl--bg-colored));
-  opacity: var(--ard-slider-track-opacity, 20%);
-  border-radius: var(--ard-slider-track-border-radius, 9999px);
-}
-.ard-slider-container-master .ard-slider-track .ard-slider-track-overlay.ard-slider-track-active,
-.ard-range-slider-container-master .ard-slider-track .ard-slider-track-overlay.ard-slider-track-active {
-  width: 0;
-  height: var(--ard-slider-active-track-height, calc(100% + 0.125em));
-  top: 50%;
-  transform: translateY(-50%);
-  background: var(--ard-slider-active-color, var(--ard-cmpcl--bg-colored));
-  opacity: var(--ard-slider-active-track-opacity, 100%);
-  transition: width var(--_ard-slider-transition) ease, left var(--_ard-slider-transition) ease;
-}
-.ard-slider-container-master .ard-slider-track .ard-hitbox,
-.ard-range-slider-container-master .ard-slider-track .ard-hitbox {
-  position: absolute;
-  inset: calc(var(--ard-slider-hitbox-size, calc(var(--ard-slider-handle-size, 1.25em) / 2)) * -1);
-}
-.ard-slider-container-master .ard-slider-track .ard-value-tick-container,
-.ard-range-slider-container-master .ard-slider-track .ard-value-tick-container {
-  position: absolute;
-  left: var(--ard-slider-value-tick-size, 0.125em);
-  width: calc(100% - var(--ard-slider-value-tick-size, 0.125em) * 2);
-  height: 100%;
-}
-.ard-slider-container-master .ard-slider-track .ard-value-tick,
-.ard-range-slider-container-master .ard-slider-track .ard-value-tick {
-  top: 50%;
-  width: var(--ard-slider-value-tick-size, 0.125em);
-  height: var(--ard-slider-value-tick-size, 0.125em);
-  border-radius: 9999px;
-  background: var(--ard-text);
-  opacity: var(--ard-slider-value-tick-opacity, 30%);
-  transform: translate(-50%, -50%);
-}
-.ard-slider-container-master .ard-slider-handle,
-.ard-range-slider-container-master .ard-slider-handle {
-  font-size: inherit;
-  top: 0;
-  width: var(--ard-slider-handle-size, 1.25em);
-  height: var(--ard-slider-handle-size, 1.25em);
-  color: inherit;
-  background: var(--ard-slider-handle-bg, var(--ard-cmpcl--bg-colored));
-  border-radius: var(--ard-slider-handle-border-radius, 9999px);
-  border: var(--ard-slider-handle-border, none);
-  z-index: 1;
-  outline: none;
-  cursor: grab;
-  transition: box-shadow 0.15s ease, left var(--_ard-slider-transition) ease;
-  box-shadow: var(--ard-simple-shadow);
-}
-.ard-slider-container-master .ard-slider-handle .ard-focus-overlay,
-.ard-range-slider-container-master .ard-slider-handle .ard-focus-overlay {
-  position: absolute;
-  top: calc(-1 * var(--ard-slider-handle-overlay-size, 0.5em));
-  bottom: calc(-1 * var(--ard-slider-handle-overlay-size, 0.5em));
-  left: calc(-1 * var(--ard-slider-handle-overlay-size, 0.5em));
-  right: calc(-1 * var(--ard-slider-handle-overlay-size, 0.5em));
-  opacity: 0;
-  border-radius: inherit;
-  pointer-events: none;
-  transition: opacity 0.2s ease;
-  background: currentColor;
-}
-.ard-slider-container-master .ard-slider-handle > .ard-focus-overlay,
-.ard-range-slider-container-master .ard-slider-handle > .ard-focus-overlay {
-  transform: scale(0.2);
-  transition: opacity 0.2s ease, transform 0.1s ease;
-}
-.ard-slider-container-master .ard-slider-handle:hover > .ard-focus-overlay, .ard-slider-container-master .ard-slider-handle:focus > .ard-focus-overlay,
-.ard-range-slider-container-master .ard-slider-handle:hover > .ard-focus-overlay,
-.ard-range-slider-container-master .ard-slider-handle:focus > .ard-focus-overlay {
-  transform: scale(1);
-}
-.ard-slider-container-master .ard-slider-handle .ard-hitbox,
-.ard-range-slider-container-master .ard-slider-handle .ard-hitbox {
-  position: absolute;
-  inset: calc(var(--ard-slider-handle-hitbox-size, 0.375em) * -1);
-  border-radius: calc(var(--ard-slider-handle-border-radius, 9999px) + var(--ard-slider-handle-hitbox-size, 0.375em));
-}
-.ard-slider-container-master .ard-slider-handle:hover .ard-focus-overlay,
-.ard-range-slider-container-master .ard-slider-handle:hover .ard-focus-overlay {
-  opacity: var(--ard-slider-handle-overlay-hover-opacity, 7.5%);
-}
-.ard-slider-container-master .ard-slider-handle:focus,
-.ard-range-slider-container-master .ard-slider-handle:focus {
-  box-shadow: var(--ard-simple-shadow2);
-}
-.ard-slider-container-master .ard-slider-handle:focus .ard-focus-overlay,
-.ard-range-slider-container-master .ard-slider-handle:focus .ard-focus-overlay {
-  opacity: var(--ard-slider-handle-overlay-focus-opacity, 15%);
-}
-.ard-slider-container-master .ard-slider-handle:active .ard-focus-overlay, .ard-slider-container-master .ard-slider-handle.ard-grabbed .ard-focus-overlay,
-.ard-range-slider-container-master .ard-slider-handle:active .ard-focus-overlay,
-.ard-range-slider-container-master .ard-slider-handle.ard-grabbed .ard-focus-overlay {
-  opacity: var(--ard-slider-handle-overlay-active-opacity, 25%);
-}
-.ard-slider-container-master .ard-slider-label-container,
-.ard-range-slider-container-master .ard-slider-label-container {
-  position: relative;
-  font-size: var(--ard-slider-label-font-size, 0.9em);
-  padding-top: var(--ard-slider-label-padding-top, 0.2em);
-  left: 0.125em;
-  width: calc(100% - 0.25em) !important;
-}
-.ard-slider-container-master .ard-slider-label-container .ard-slider-label,
-.ard-range-slider-container-master .ard-slider-label-container .ard-slider-label {
-  transform: translateX(-50%);
-}
-.ard-slider-container-master .ard-slider-tooltip-wrapper,
-.ard-range-slider-container-master .ard-slider-tooltip-wrapper {
-  transition: left var(--_ard-slider-transition) ease;
-  z-index: 2;
-}
-.ard-slider-container-master .ard-slider-tooltip,
-.ard-range-slider-container-master .ard-slider-tooltip {
-  background: var(--ard-slider-label-bg, var(--ard-text3));
-  height: var(--ard-slider-label-height, 2em);
-  padding: var(--ard-slider-label-padding, 0 0.75em);
-  border-radius: var(--ard-slider-label-border-radius, 0.375em);
-  color: var(--ard-slider-label-color, var(--ard-text2-alt));
-  font-size: var(--ard-slider-label-font-size, 0.875rem);
-  font-weight: var(--ard-slider-label-font-weight, 500);
-  white-space: nowrap;
-  display: flex;
-  align-items: center;
-  position: relative;
-  z-index: 2;
-  user-select: none;
-  transform: scale(0);
-  transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.ard-slider-container-master .ard-slider-tooltip::before,
-.ard-range-slider-container-master .ard-slider-tooltip::before {
-  content: "";
-  position: absolute;
-  border: var(--ard-slider-label-arrow-size, 0.375em) solid transparent;
-  left: 50%;
-}
-.ard-slider-container-master.ard-tooltip-top .ard-slider-tooltip,
-.ard-range-slider-container-master.ard-tooltip-top .ard-slider-tooltip {
-  bottom: var(--ard-slider-label-offset, 0.5em);
-  transform-origin: center bottom;
-}
-.ard-slider-container-master.ard-tooltip-top .ard-slider-tooltip::before,
-.ard-range-slider-container-master.ard-tooltip-top .ard-slider-tooltip::before {
-  bottom: 0;
-  border-top-color: var(--ard-slider-label-bg);
-  transform: translate(-50%, 100%);
-}
-.ard-slider-container-master.ard-tooltip-bottom .ard-slider-tooltip,
-.ard-range-slider-container-master.ard-tooltip-bottom .ard-slider-tooltip {
-  top: var(--ard-slider-label-offset, 0.5em);
-  transform-origin: center top;
-}
-.ard-slider-container-master.ard-tooltip-bottom .ard-slider-tooltip::before,
-.ard-range-slider-container-master.ard-tooltip-bottom .ard-slider-tooltip::before {
-  top: 0;
-  border-bottom-color: var(--ard-slider-label-bg);
-  transform: translate(-50%, -100%);
-}
-.ard-slider-container-master .ard-slider-handle:hover + .ard-slider-tooltip-wrapper .ard-slider-tooltip,
-.ard-slider-container-master .ard-slider-handle:focus + .ard-slider-tooltip-wrapper .ard-slider-tooltip,
-.ard-range-slider-container-master .ard-slider-handle:hover + .ard-slider-tooltip-wrapper .ard-slider-tooltip,
-.ard-range-slider-container-master .ard-slider-handle:focus + .ard-slider-tooltip-wrapper .ard-slider-tooltip {
-  transform: scale(1);
-}
-.ard-slider-container-master .ard-slider-container:focus-within .ard-slider-handle:not(:focus) + .ard-slider-tooltip-wrapper .ard-slider-tooltip,
-.ard-range-slider-container-master .ard-slider-container:focus-within .ard-slider-handle:not(:focus) + .ard-slider-tooltip-wrapper .ard-slider-tooltip {
-  transform: scale(0);
-}
-.ard-slider-container-master .ard-slider-handle .ard-slider-tooltip-wrapper .ard-slider-tooltip.ard-tooltip-always,
-.ard-range-slider-container-master .ard-slider-handle .ard-slider-tooltip-wrapper .ard-slider-tooltip.ard-tooltip-always {
-  transform: scale(1) !important;
-}
-
-.ard-body-slider-handle-grabbed {
-  cursor: grabbing !important;
-}
-.ard-body-slider-handle-grabbed * {
-  cursor: grabbing !important;
-  pointer-events: none !important;
+@layer ard-theme {
+  :root {
+    --ard-slider-width: 100%;
+    --ard-slider-padding: 0 calc(var(--ard-slider-handle-size, 1.25em) / 2);
+    --ard-slider-track-height: 0.25em;
+    --ard-slider-track-opacity: 20%;
+    --ard-slider-track-border-radius: 9999px;
+    --ard-slider-active-track-height: calc(100% + 0.125em);
+    --ard-slider-active-track-opacity: 100%;
+    --ard-slider-value-tick-size: 0.125em;
+    --ard-slider-value-tick-opacity: 30%;
+    --ard-slider-track-hitbox-size: calc(var(--ard-slider-handle-size, 1.25em) / 2);
+    --ard-slider-handle-size: 1.25em;
+    --ard-slider-handle-border: none;
+    --ard-slider-handle-border-radius: 9999px;
+    --ard-slider-handle-hitbox-size: 0.375em;
+    --ard-slider-handle-overlay-size: 0.5em;
+    --ard-slider-handle-overlay-hover-opacity: 7.5%;
+    --ard-slider-handle-overlay-focus-opacity: 15%;
+    --ard-slider-handle-overlay-active-opacity: 25%;
+    --ard-slider-label-font-size: 0.875rem;
+    --ard-slider-label-padding-top: 0.2em;
+    --ard-slider-label-height: 2em;
+    --ard-slider-label-border: none;
+    --ard-slider-label-border-radius: 0.375em;
+    --ard-slider-label-padding: 0 0.75em;
+    --ard-slider-label-font-weight: 500;
+    --ard-slider-label-arrow-size: 0.375em;
+    --ard-slider-label-offset: 0.5em;
+  }
+  .ard-slider-container-master,
+  .ard-range-slider-container-master {
+    position: relative;
+    font-size: var(--ard-slider-font-size, var(--ard-form-field-font-size, 1rem));
+    width: var(--ard-slider-width, 100%);
+    max-width: 100%;
+    padding: var(--ard-slider-padding, 0 calc(var(--ard-slider-handle-size, 1.25em) / 2));
+    display: flex;
+    flex-direction: column;
+  }
+  .ard-slider-container-master.ard-color-none,
+  .ard-range-slider-container-master.ard-color-none {
+    --ard-cmpcl--bg: var(--ard-bg);
+    --ard-cmpcl--bg-colored: var(--ard-bg-alt);
+    --ard-cmpcl--bg-colored-light: var(--ard-detail-light);
+    --ard-cmpcl--bg-header: var(--ard-bg-filled);
+    --ard-cmpcl--bg-colored-verylight: var(--ard-bg-darker);
+    --ard-cmpcl--on-bg: var(--ard-text);
+    --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored-light: var(--ard-text);
+    --ard-cmpcl--border: var(--ard-text);
+    --ard-cmpcl--border-light: var(--ard-text2);
+    --ard-cmpcl--content: var(--ard-text);
+    --ard-cmpcl--content-light: var(--ard-text-alt);
+    --ard-cmpcl--overlay-rgb: var(--ard-overlay-rgb);
+    --ard-cmpcl--overlay: var(--ard-overlay);
+    --ard-cmpcl--overlay-colored: var(--ard-overlay);
+    --ard-cmpcl--overlay-colored-light: var(--ard-text-alt);
+  }
+  .ard-slider-container-master.ard-color-primary,
+  .ard-range-slider-container-master.ard-color-primary {
+    --ard-cmpcl--bg: rgb(var(--ard-primary-500));
+    --ard-cmpcl--bg-colored: rgb(var(--ard-primary-500));
+    --ard-cmpcl--bg-colored-light: rgb(var(--ard-primary-100));
+    --ard-cmpcl--bg-header: rgb(var(--ard-primary-100));
+    --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-primary-50));
+    --ard-cmpcl--on-bg: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored-light: var(--ard-text);
+    --ard-cmpcl--border: rgb(var(--ard-primary-300));
+    --ard-cmpcl--border-light: rgb(var(--ard-primary-100));
+    --ard-cmpcl--content: rgb(var(--ard-primary-700));
+    --ard-cmpcl--content-light: rgb(var(--ard-primary-300));
+    --ard-cmpcl--overlay-rgb: var(--ard-primary-500);
+    --ard-cmpcl--overlay: var(--ard-overlay);
+    --ard-cmpcl--overlay-colored: rgb(var(--ard-primary-700));
+    --ard-cmpcl--overlay-colored-light: rgb(var(--ard-primary-100));
+  }
+  .ard-slider-container-master.ard-color-secondary,
+  .ard-range-slider-container-master.ard-color-secondary {
+    --ard-cmpcl--bg: rgb(var(--ard-secondary-500));
+    --ard-cmpcl--bg-colored: rgb(var(--ard-secondary-500));
+    --ard-cmpcl--bg-colored-light: rgb(var(--ard-secondary-50));
+    --ard-cmpcl--bg-header: rgb(var(--ard-secondary-50));
+    --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-secondary-50));
+    --ard-cmpcl--on-bg: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored-light: var(--ard-text);
+    --ard-cmpcl--border: rgb(var(--ard-secondary-300));
+    --ard-cmpcl--border-light: rgb(var(--ard-secondary-100));
+    --ard-cmpcl--content: rgb(var(--ard-secondary-700));
+    --ard-cmpcl--content-light: rgb(var(--ard-secondary-300));
+    --ard-cmpcl--overlay-rgb: var(--ard-secondary-500);
+    --ard-cmpcl--overlay: var(--ard-overlay);
+    --ard-cmpcl--overlay-colored: rgb(var(--ard-secondary-700));
+    --ard-cmpcl--overlay-colored-light: rgb(var(--ard-secondary-100));
+  }
+  .ard-slider-container-master.ard-color-warn,
+  .ard-range-slider-container-master.ard-color-warn {
+    --ard-cmpcl--bg: rgb(var(--ard-warn-500));
+    --ard-cmpcl--bg-colored: rgb(var(--ard-warn-500));
+    --ard-cmpcl--bg-colored-light: rgb(var(--ard-warn-50));
+    --ard-cmpcl--bg-header: rgb(var(--ard-warn-50));
+    --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-warn-50));
+    --ard-cmpcl--on-bg: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored-light: var(--ard-text);
+    --ard-cmpcl--border: rgb(var(--ard-warn-300));
+    --ard-cmpcl--border-light: rgb(var(--ard-warn-100));
+    --ard-cmpcl--content: rgb(var(--ard-warn-700));
+    --ard-cmpcl--content-light: rgb(var(--ard-warn-100));
+    --ard-cmpcl--overlay-rgb: var(--ard-warn-500);
+    --ard-cmpcl--overlay: var(--ard-overlay);
+    --ard-cmpcl--overlay-colored: rgb(var(--ard-warn-700));
+    --ard-cmpcl--overlay-colored-light: rgb(var(--ard-warn-100));
+  }
+  .ard-slider-container-master.ard-color-danger,
+  .ard-range-slider-container-master.ard-color-danger {
+    --ard-cmpcl--bg: rgb(var(--ard-danger-700));
+    --ard-cmpcl--bg-colored: rgb(var(--ard-danger-700));
+    --ard-cmpcl--bg-colored-light: rgb(var(--ard-danger-100));
+    --ard-cmpcl--bg-header: rgb(var(--ard-danger-100));
+    --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-danger-50));
+    --ard-cmpcl--on-bg: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored-light: var(--ard-text);
+    --ard-cmpcl--border: rgb(var(--ard-danger-300));
+    --ard-cmpcl--border-light: rgb(var(--ard-danger-100));
+    --ard-cmpcl--content: rgb(var(--ard-danger-900));
+    --ard-cmpcl--content-light: rgb(var(--ard-danger-500));
+    --ard-cmpcl--overlay-rgb: var(--ard-danger-700);
+    --ard-cmpcl--overlay: var(--ard-overlay);
+    --ard-cmpcl--overlay-colored: rgb(var(--ard-danger-700));
+    --ard-cmpcl--overlay-colored-light: rgb(var(--ard-danger-300));
+  }
+  .ard-slider-container-master.ard-color-success,
+  .ard-range-slider-container-master.ard-color-success {
+    --ard-cmpcl--bg: rgb(var(--ard-success-700));
+    --ard-cmpcl--bg-colored: rgb(var(--ard-success-700));
+    --ard-cmpcl--bg-colored-light: rgb(var(--ard-success-50));
+    --ard-cmpcl--bg-header: rgb(var(--ard-success-50));
+    --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-success-50));
+    --ard-cmpcl--on-bg: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored-light: var(--ard-text);
+    --ard-cmpcl--border: rgb(var(--ard-success-300));
+    --ard-cmpcl--border-light: rgb(var(--ard-success-100));
+    --ard-cmpcl--content: rgb(var(--ard-success-900));
+    --ard-cmpcl--content-light: rgb(var(--ard-success-300));
+    --ard-cmpcl--overlay-rgb: var(--ard-success-700);
+    --ard-cmpcl--overlay: var(--ard-overlay);
+    --ard-cmpcl--overlay-colored: rgb(var(--ard-success-700));
+    --ard-cmpcl--overlay-colored-light: rgb(var(--ard-success-300));
+  }
+  .ard-slider-container-master.ard-color-info,
+  .ard-range-slider-container-master.ard-color-info {
+    --ard-cmpcl--bg: rgb(var(--ard-info-500));
+    --ard-cmpcl--bg-colored: rgb(var(--ard-info-500));
+    --ard-cmpcl--bg-colored-light: rgb(var(--ard-info-50));
+    --ard-cmpcl--bg-header: rgb(var(--ard-info-50));
+    --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-info-50));
+    --ard-cmpcl--on-bg: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored-light: var(--ard-text);
+    --ard-cmpcl--border: rgb(var(--ard-info-300));
+    --ard-cmpcl--border-light: rgb(var(--ard-info-100));
+    --ard-cmpcl--content: rgb(var(--ard-info-700));
+    --ard-cmpcl--content-light: rgb(var(--ard-info-300));
+    --ard-cmpcl--overlay-rgb: var(--ard-info-500);
+    --ard-cmpcl--overlay: var(--ard-overlay);
+    --ard-cmpcl--overlay-colored: rgb(var(--ard-info-700));
+    --ard-cmpcl--overlay-colored-light: rgb(var(--ard-info-100));
+  }
+  .ard-slider-container-master.ard-color-currentColor,
+  .ard-range-slider-container-master.ard-color-currentColor {
+    --ard-cmpcl--bg: var(--ard-bg);
+    --ard-cmpcl--bg-colored: currentColor;
+    --ard-cmpcl--on-bg: currentColor;
+    --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+    --ard-cmpcl--border: currentColor;
+    --ard-cmpcl--border-light: currentColor;
+    --ard-cmpcl--content: currentColor;
+    --ard-cmpcl--content-light: currentColor;
+    --ard-cmpcl--overlay-rgb: var(--ard-overlay-rgb);
+    --ard-cmpcl--overlay: var(--ard-overlay);
+    --ard-cmpcl--overlay-colored: currentColor;
+    --ard-cmpcl--overlay-colored-light: currentColor;
+  }
+  .ard-slider-container-master.ard-compact,
+  .ard-range-slider-container-master.ard-compact {
+    font-size: var(--ard-slider-font-size-compact, var(--ard-form-field-font-size-compact, 0.875rem));
+  }
+  .ard-slider-container-master.ard-compact .ard-slider-container > .ard-slider-handle,
+  .ard-range-slider-container-master.ard-compact .ard-slider-container > .ard-slider-handle {
+    font-size: 0.95em;
+  }
+  .ard-slider-container-master .ard-slider-container,
+  .ard-range-slider-container-master .ard-slider-container {
+    display: flex;
+    align-items: center;
+    position: relative;
+    width: 100%;
+    height: var(--ard-slider-handle-size, 1.25em);
+    cursor: pointer;
+  }
+  .ard-slider-container-master .ard-slider-track,
+  .ard-range-slider-container-master .ard-slider-track {
+    width: 100%;
+    height: var(--ard-slider-track-height, 0.25em);
+    background: var(--ard-bg);
+  }
+  .ard-slider-container-master .ard-slider-track .ard-slider-track-overlay,
+  .ard-range-slider-container-master .ard-slider-track .ard-slider-track-overlay {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: var(--ard-slider-track-color, var(--ard-cmpcl--bg-colored));
+    opacity: var(--ard-slider-track-opacity, 20%);
+    border-radius: var(--ard-slider-track-border-radius, 9999px);
+  }
+  .ard-slider-container-master .ard-slider-track .ard-slider-track-overlay.ard-slider-track-active,
+  .ard-range-slider-container-master .ard-slider-track .ard-slider-track-overlay.ard-slider-track-active {
+    width: 0;
+    height: var(--ard-slider-active-track-height, calc(100% + 0.125em));
+    top: 50%;
+    transform: translateY(-50%);
+    background: var(--ard-slider-active-color, var(--ard-cmpcl--bg-colored));
+    opacity: var(--ard-slider-active-track-opacity, 100%);
+    transition: width var(--_ard-slider-transition) ease, left var(--_ard-slider-transition) ease;
+  }
+  .ard-slider-container-master .ard-slider-track .ard-hitbox,
+  .ard-range-slider-container-master .ard-slider-track .ard-hitbox {
+    position: absolute;
+    inset: calc(var(--ard-slider-hitbox-size, calc(var(--ard-slider-handle-size, 1.25em) / 2)) * -1);
+  }
+  .ard-slider-container-master .ard-slider-track .ard-value-tick-container,
+  .ard-range-slider-container-master .ard-slider-track .ard-value-tick-container {
+    position: absolute;
+    left: var(--ard-slider-value-tick-size, 0.125em);
+    width: calc(100% - var(--ard-slider-value-tick-size, 0.125em) * 2);
+    height: 100%;
+  }
+  .ard-slider-container-master .ard-slider-track .ard-value-tick,
+  .ard-range-slider-container-master .ard-slider-track .ard-value-tick {
+    top: 50%;
+    width: var(--ard-slider-value-tick-size, 0.125em);
+    height: var(--ard-slider-value-tick-size, 0.125em);
+    border-radius: 9999px;
+    background: var(--ard-text);
+    opacity: var(--ard-slider-value-tick-opacity, 30%);
+    transform: translate(-50%, -50%);
+  }
+  .ard-slider-container-master .ard-slider-handle,
+  .ard-range-slider-container-master .ard-slider-handle {
+    font-size: inherit;
+    top: 0;
+    width: var(--ard-slider-handle-size, 1.25em);
+    height: var(--ard-slider-handle-size, 1.25em);
+    color: inherit;
+    background: var(--ard-slider-handle-bg, var(--ard-cmpcl--bg-colored));
+    border-radius: var(--ard-slider-handle-border-radius, 9999px);
+    border: var(--ard-slider-handle-border, none);
+    z-index: 1;
+    outline: none;
+    cursor: grab;
+    transition: box-shadow 0.15s ease, left var(--_ard-slider-transition) ease;
+    box-shadow: var(--ard-simple-shadow);
+  }
+  .ard-slider-container-master .ard-slider-handle .ard-focus-overlay,
+  .ard-range-slider-container-master .ard-slider-handle .ard-focus-overlay {
+    position: absolute;
+    top: calc(-1 * var(--ard-slider-handle-overlay-size, 0.5em));
+    bottom: calc(-1 * var(--ard-slider-handle-overlay-size, 0.5em));
+    left: calc(-1 * var(--ard-slider-handle-overlay-size, 0.5em));
+    right: calc(-1 * var(--ard-slider-handle-overlay-size, 0.5em));
+    opacity: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    transition: opacity 0.2s ease;
+    background: currentColor;
+  }
+  .ard-slider-container-master .ard-slider-handle > .ard-focus-overlay,
+  .ard-range-slider-container-master .ard-slider-handle > .ard-focus-overlay {
+    transform: scale(0.2);
+    transition: opacity 0.2s ease, transform 0.1s ease;
+  }
+  .ard-slider-container-master .ard-slider-handle:hover > .ard-focus-overlay, .ard-slider-container-master .ard-slider-handle:focus > .ard-focus-overlay,
+  .ard-range-slider-container-master .ard-slider-handle:hover > .ard-focus-overlay,
+  .ard-range-slider-container-master .ard-slider-handle:focus > .ard-focus-overlay {
+    transform: scale(1);
+  }
+  .ard-slider-container-master .ard-slider-handle .ard-hitbox,
+  .ard-range-slider-container-master .ard-slider-handle .ard-hitbox {
+    position: absolute;
+    inset: calc(var(--ard-slider-handle-hitbox-size, 0.375em) * -1);
+    border-radius: calc(var(--ard-slider-handle-border-radius, 9999px) + var(--ard-slider-handle-hitbox-size, 0.375em));
+  }
+  .ard-slider-container-master .ard-slider-handle:hover .ard-focus-overlay,
+  .ard-range-slider-container-master .ard-slider-handle:hover .ard-focus-overlay {
+    opacity: var(--ard-slider-handle-overlay-hover-opacity, 7.5%);
+  }
+  .ard-slider-container-master .ard-slider-handle:focus,
+  .ard-range-slider-container-master .ard-slider-handle:focus {
+    box-shadow: var(--ard-simple-shadow2);
+  }
+  .ard-slider-container-master .ard-slider-handle:focus .ard-focus-overlay,
+  .ard-range-slider-container-master .ard-slider-handle:focus .ard-focus-overlay {
+    opacity: var(--ard-slider-handle-overlay-focus-opacity, 15%);
+  }
+  .ard-slider-container-master .ard-slider-handle:active .ard-focus-overlay, .ard-slider-container-master .ard-slider-handle.ard-grabbed .ard-focus-overlay,
+  .ard-range-slider-container-master .ard-slider-handle:active .ard-focus-overlay,
+  .ard-range-slider-container-master .ard-slider-handle.ard-grabbed .ard-focus-overlay {
+    opacity: var(--ard-slider-handle-overlay-active-opacity, 25%);
+  }
+  .ard-slider-container-master .ard-slider-label-container,
+  .ard-range-slider-container-master .ard-slider-label-container {
+    position: relative;
+    font-size: var(--ard-slider-label-font-size, 0.9em);
+    padding-top: var(--ard-slider-label-padding-top, 0.2em);
+    left: 0.125em;
+    width: calc(100% - 0.25em) !important;
+  }
+  .ard-slider-container-master .ard-slider-label-container .ard-slider-label,
+  .ard-range-slider-container-master .ard-slider-label-container .ard-slider-label {
+    transform: translateX(-50%);
+  }
+  .ard-slider-container-master .ard-slider-tooltip-wrapper,
+  .ard-range-slider-container-master .ard-slider-tooltip-wrapper {
+    transition: left var(--_ard-slider-transition) ease;
+    z-index: 2;
+  }
+  .ard-slider-container-master .ard-slider-tooltip,
+  .ard-range-slider-container-master .ard-slider-tooltip {
+    background: var(--ard-slider-label-bg, var(--ard-text3));
+    height: var(--ard-slider-label-height, 2em);
+    padding: var(--ard-slider-label-padding, 0 0.75em);
+    border-radius: var(--ard-slider-label-border-radius, 0.375em);
+    color: var(--ard-slider-label-color, var(--ard-text2-alt));
+    font-size: var(--ard-slider-label-font-size, 0.875rem);
+    font-weight: var(--ard-slider-label-font-weight, 500);
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    position: relative;
+    z-index: 2;
+    user-select: none;
+    transform: scale(0);
+    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  .ard-slider-container-master .ard-slider-tooltip::before,
+  .ard-range-slider-container-master .ard-slider-tooltip::before {
+    content: "";
+    position: absolute;
+    border: var(--ard-slider-label-arrow-size, 0.375em) solid transparent;
+    left: 50%;
+  }
+  .ard-slider-container-master.ard-tooltip-top .ard-slider-tooltip,
+  .ard-range-slider-container-master.ard-tooltip-top .ard-slider-tooltip {
+    bottom: var(--ard-slider-label-offset, 0.5em);
+    transform-origin: center bottom;
+  }
+  .ard-slider-container-master.ard-tooltip-top .ard-slider-tooltip::before,
+  .ard-range-slider-container-master.ard-tooltip-top .ard-slider-tooltip::before {
+    bottom: 0;
+    border-top-color: var(--ard-slider-label-bg);
+    transform: translate(-50%, 100%);
+  }
+  .ard-slider-container-master.ard-tooltip-bottom .ard-slider-tooltip,
+  .ard-range-slider-container-master.ard-tooltip-bottom .ard-slider-tooltip {
+    top: var(--ard-slider-label-offset, 0.5em);
+    transform-origin: center top;
+  }
+  .ard-slider-container-master.ard-tooltip-bottom .ard-slider-tooltip::before,
+  .ard-range-slider-container-master.ard-tooltip-bottom .ard-slider-tooltip::before {
+    top: 0;
+    border-bottom-color: var(--ard-slider-label-bg);
+    transform: translate(-50%, -100%);
+  }
+  .ard-slider-container-master .ard-slider-handle:hover + .ard-slider-tooltip-wrapper .ard-slider-tooltip,
+  .ard-slider-container-master .ard-slider-handle:focus + .ard-slider-tooltip-wrapper .ard-slider-tooltip,
+  .ard-range-slider-container-master .ard-slider-handle:hover + .ard-slider-tooltip-wrapper .ard-slider-tooltip,
+  .ard-range-slider-container-master .ard-slider-handle:focus + .ard-slider-tooltip-wrapper .ard-slider-tooltip {
+    transform: scale(1);
+  }
+  .ard-slider-container-master .ard-slider-container:focus-within .ard-slider-handle:not(:focus) + .ard-slider-tooltip-wrapper .ard-slider-tooltip,
+  .ard-range-slider-container-master .ard-slider-container:focus-within .ard-slider-handle:not(:focus) + .ard-slider-tooltip-wrapper .ard-slider-tooltip {
+    transform: scale(0);
+  }
+  .ard-slider-container-master .ard-slider-handle .ard-slider-tooltip-wrapper .ard-slider-tooltip.ard-tooltip-always,
+  .ard-range-slider-container-master .ard-slider-handle .ard-slider-tooltip-wrapper .ard-slider-tooltip.ard-tooltip-always {
+    transform: scale(1) !important;
+  }
+  .ard-body-slider-handle-grabbed {
+    cursor: grabbing !important;
+  }
+  .ard-body-slider-handle-grabbed * {
+    cursor: grabbing !important;
+    pointer-events: none !important;
+  }
 }
 
 /*# sourceMappingURL=slider.css.map */