[data-ddr].noUi-target {
  height: auto !important;
  min-height: 2rem !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0.5rem 0 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
}
[data-ddr] .noUi-base {
  height: 0.375rem !important;
  background: oklch(var(--b2, var(--b1))) !important;
  border-radius: 9999px !important;
}
[data-ddr] .noUi-horizontal {
  height: 0.375rem !important;
}
[data-ddr] .noUi-origin {
  height: 0.375rem !important;
  top: 0 !important;
}
[data-ddr] .noUi-connect {
  height: 0.375rem !important;
  top: 0 !important;
  border-radius: 9999px !important;
  background: oklch(var(--ddr-color)) !important;
}
[data-ddr] .noUi-handle {
  width: 1.25rem !important;
  height: 1.25rem !important;
  right: -0.625rem !important;
  top: -0.4375rem !important;
  border-radius: 9999px !important;
  background: oklch(var(--b1)) !important;
  border: 2px solid oklch(var(--ddr-color)) !important;
  box-shadow:
    0 2px 4px #0000001f,
    0 1px 2px #00000014 !important;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease !important;
  cursor: pointer !important;
}
[data-ddr] .noUi-handle:before {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  top: 50% !important;
  left: 50% !important;
  width: 0.25rem !important;
  height: 0.25rem !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 9999px !important;
  background: oklch(var(--ddr-color)) !important;
}
[data-ddr] .noUi-handle:after {
  display: none !important;
  content: none !important;
}
[data-ddr] .noUi-handle:hover {
  transform: scale(1.1) !important;
  box-shadow:
    0 4px 8px #00000026,
    0 2px 4px #0000001a !important;
}
[data-ddr] .noUi-handle.noUi-active,
[data-ddr] .noUi-handle:active {
  transform: scale(1.05) !important;
  box-shadow:
    0 6px 12px #0000002e,
    0 3px 6px #0000001f !important;
}
[data-ddr] .noUi-handle:focus {
  outline: none !important;
  box-shadow:
    0 0 0 4px oklch(var(--ddr-color) / 0.2),
    0 2px 4px #0000001f,
    0 1px 2px #00000014 !important;
}
[data-ddr] .noUi-tooltip {
  display: none !important;
}
[data-ddr][data-ddr-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}
[data-ddr][data-ddr-disabled="true"] .noUi-handle,
[data-ddr][data-ddr-disabled="true"] .noUi-connect {
  cursor: not-allowed;
}
[data-ddr][data-ddr-disabled="true"] .noUi-handle:hover {
  transform: none;
}
[data-ddr][data-ddr-color="primary"] {
  --ddr-color: var(--p);
}
[data-ddr][data-ddr-color="secondary"] {
  --ddr-color: var(--s);
}
[data-ddr][data-ddr-color="accent"] {
  --ddr-color: var(--a);
}
[data-ddr][data-ddr-color="neutral"] {
  --ddr-color: var(--n);
}
[data-ddr][data-ddr-color="info"] {
  --ddr-color: var(--in);
}
[data-ddr][data-ddr-color="success"] {
  --ddr-color: var(--su);
}
[data-ddr][data-ddr-color="warning"] {
  --ddr-color: var(--wa);
}
[data-ddr][data-ddr-color="error"] {
  --ddr-color: var(--er);
}
[data-ddr] {
  --ddr-color: var(--p, 210 100% 50%);
}