@larva.io/webcomponents/dist/collection/components/internal/slider/slider.css

Fentrica SmartUnits WebComponents package

slot-fb[hidden], slot[hidden] {
  display: initial !important;
}

:host {
  box-sizing: content-box !important;
  width: 100%; /* Full-width */
  text-align: center;
  padding: 1rem 0;
}

:host(:focus) {
  outline: none;
}

:host(.lar-slider-disabled) {
  pointer-events: none;
  opacity: 0.3;
  filter: grayscale(0.4);
}

:host(.lar-slider-vertical) input {
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  margin-top: 4.8rem;
}

input {
  display: inline-block;
  box-sizing: content-box !important;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  background: transparent;
  width: 12rem;
  height: 2.4rem;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

input::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.5rem;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.08);
  border-radius: calc(0.5rem / 2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

input::-moz-range-track {
  width: 100%;
  height: 0.5rem;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.08);
  border-radius: calc(0.5rem / 2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 2.4rem;
  height: 2.4rem;
  margin-top: calc((0.5rem - 2.4rem) / 2);
  cursor: grab;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.9);
  background: var(--lar-background-color, #000);
  box-shadow: 0 2px 8px -1px rgba(0, 0, 0, 0.15), 0 4px 16px -2px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

input::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px -1px rgba(0, 0, 0, 0.2), 0 6px 20px -2px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 2px rgba(0, 0, 0, 0.12);
}

input::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.05);
  box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.12), 0 3px 12px -2px rgba(0, 0, 0, 0.08), inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

input::-moz-range-thumb {
  width: 2.4rem;
  height: 2.4rem;
  cursor: grab;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.9);
  background: var(--lar-background-color, #000);
  box-shadow: 0 2px 8px -1px rgba(0, 0, 0, 0.15), 0 4px 16px -2px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

input::-moz-range-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px -1px rgba(0, 0, 0, 0.2), 0 6px 20px -2px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 2px rgba(0, 0, 0, 0.12);
}

input::-moz-range-thumb:active {
  cursor: grabbing;
  transform: scale(1.05);
  box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.12), 0 3px 12px -2px rgba(0, 0, 0, 0.08), inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

:host(.lar-color-primary) input::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--lar-color-primary, #780bb7), var(--lar-color-primary-tint, rgb(133.5, 35.4, 190.2)) 50%, rgba(0, 0, 0, 0.08));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.1);
}

:host(.lar-color-primary) input::-moz-range-track {
  background: linear-gradient(to right, var(--lar-color-primary, #780bb7), var(--lar-color-primary-tint, rgb(133.5, 35.4, 190.2)) 50%, rgba(0, 0, 0, 0.08));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.1);
}

:host(.lar-color-primary) input::-webkit-slider-thumb {
  border-color: var(--lar-color-primary, #780bb7);
  box-shadow: 0 0 0 3px rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.2), 0 2px 8px -1px rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.3), 0 4px 16px -2px rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}

:host(.lar-color-primary) input::-webkit-slider-thumb:hover {
  border-color: var(--lar-color-primary-shade, rgb(105.6, 9.68, 161.04));
  box-shadow: 0 0 0 4px rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.25), 0 4px 12px -1px rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.4), 0 6px 20px -2px rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 2px rgba(0, 0, 0, 0.12);
}

:host(.lar-color-primary) input::-webkit-slider-thumb:active {
  border-color: var(--lar-color-primary-shade, rgb(105.6, 9.68, 161.04));
  box-shadow: 0 0 0 2px rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.3), 0 2px 6px -1px rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.35), 0 3px 12px -2px rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.25), inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

:host(.lar-color-primary) input::-moz-range-thumb {
  border-color: var(--lar-color-primary, #780bb7);
  box-shadow: 0 0 0 3px rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.2), 0 2px 8px -1px rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.3), 0 4px 16px -2px rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}

:host(.lar-color-primary) input::-moz-range-thumb:hover {
  border-color: var(--lar-color-primary-shade, rgb(105.6, 9.68, 161.04));
  box-shadow: 0 0 0 4px rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.25), 0 4px 12px -1px rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.4), 0 6px 20px -2px rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 2px rgba(0, 0, 0, 0.12);
}

:host(.lar-color-primary) input::-moz-range-thumb:active {
  border-color: var(--lar-color-primary-shade, rgb(105.6, 9.68, 161.04));
  box-shadow: 0 0 0 2px rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.3), 0 2px 6px -1px rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.35), 0 3px 12px -2px rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.25), inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

:host(.lar-color-secondary) input::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--lar-color-secondary, #7fb800), var(--lar-color-secondary-tint, rgb(139.8, 191.1, 25.5)) 50%, rgba(0, 0, 0, 0.08));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.1);
}

:host(.lar-color-secondary) input::-moz-range-track {
  background: linear-gradient(to right, var(--lar-color-secondary, #7fb800), var(--lar-color-secondary-tint, rgb(139.8, 191.1, 25.5)) 50%, rgba(0, 0, 0, 0.08));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.1);
}

:host(.lar-color-secondary) input::-webkit-slider-thumb {
  border-color: var(--lar-color-secondary, #7fb800);
  box-shadow: 0 0 0 3px rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.2), 0 2px 8px -1px rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.3), 0 4px 16px -2px rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}

:host(.lar-color-secondary) input::-webkit-slider-thumb:hover {
  border-color: var(--lar-color-secondary-shade, rgb(111.76, 161.92, 0));
  box-shadow: 0 0 0 4px rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.25), 0 4px 12px -1px rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.4), 0 6px 20px -2px rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 2px rgba(0, 0, 0, 0.12);
}

:host(.lar-color-secondary) input::-webkit-slider-thumb:active {
  border-color: var(--lar-color-secondary-shade, rgb(111.76, 161.92, 0));
  box-shadow: 0 0 0 2px rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.3), 0 2px 6px -1px rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.35), 0 3px 12px -2px rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.25), inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

:host(.lar-color-secondary) input::-moz-range-thumb {
  border-color: var(--lar-color-secondary, #7fb800);
  box-shadow: 0 0 0 3px rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.2), 0 2px 8px -1px rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.3), 0 4px 16px -2px rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}

:host(.lar-color-secondary) input::-moz-range-thumb:hover {
  border-color: var(--lar-color-secondary-shade, rgb(111.76, 161.92, 0));
  box-shadow: 0 0 0 4px rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.25), 0 4px 12px -1px rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.4), 0 6px 20px -2px rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 2px rgba(0, 0, 0, 0.12);
}

:host(.lar-color-secondary) input::-moz-range-thumb:active {
  border-color: var(--lar-color-secondary-shade, rgb(111.76, 161.92, 0));
  box-shadow: 0 0 0 2px rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.3), 0 2px 6px -1px rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.35), 0 3px 12px -2px rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.25), inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

:host(.lar-color-tertiary) input::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--lar-color-tertiary, #00a6ed), var(--lar-color-tertiary-tint, rgb(25.5, 174.9, 238.8)) 50%, rgba(0, 0, 0, 0.08));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.1);
}

:host(.lar-color-tertiary) input::-moz-range-track {
  background: linear-gradient(to right, var(--lar-color-tertiary, #00a6ed), var(--lar-color-tertiary-tint, rgb(25.5, 174.9, 238.8)) 50%, rgba(0, 0, 0, 0.08));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.1);
}

:host(.lar-color-tertiary) input::-webkit-slider-thumb {
  border-color: var(--lar-color-tertiary, #00a6ed);
  box-shadow: 0 0 0 3px rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.2), 0 2px 8px -1px rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.3), 0 4px 16px -2px rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}

:host(.lar-color-tertiary) input::-webkit-slider-thumb:hover {
  border-color: var(--lar-color-tertiary-shade, rgb(0, 146.08, 208.56));
  box-shadow: 0 0 0 4px rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.25), 0 4px 12px -1px rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.4), 0 6px 20px -2px rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 2px rgba(0, 0, 0, 0.12);
}

:host(.lar-color-tertiary) input::-webkit-slider-thumb:active {
  border-color: var(--lar-color-tertiary-shade, rgb(0, 146.08, 208.56));
  box-shadow: 0 0 0 2px rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.3), 0 2px 6px -1px rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.35), 0 3px 12px -2px rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.25), inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

:host(.lar-color-tertiary) input::-moz-range-thumb {
  border-color: var(--lar-color-tertiary, #00a6ed);
  box-shadow: 0 0 0 3px rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.2), 0 2px 8px -1px rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.3), 0 4px 16px -2px rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}

:host(.lar-color-tertiary) input::-moz-range-thumb:hover {
  border-color: var(--lar-color-tertiary-shade, rgb(0, 146.08, 208.56));
  box-shadow: 0 0 0 4px rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.25), 0 4px 12px -1px rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.4), 0 6px 20px -2px rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 2px rgba(0, 0, 0, 0.12);
}

:host(.lar-color-tertiary) input::-moz-range-thumb:active {
  border-color: var(--lar-color-tertiary-shade, rgb(0, 146.08, 208.56));
  box-shadow: 0 0 0 2px rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.3), 0 2px 6px -1px rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.35), 0 3px 12px -2px rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.25), inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

:host(.lar-color-success) input::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--lar-color-success, #7fb800), var(--lar-color-success-tint, rgb(139.8, 191.1, 25.5)) 50%, rgba(0, 0, 0, 0.08));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.1);
}

:host(.lar-color-success) input::-moz-range-track {
  background: linear-gradient(to right, var(--lar-color-success, #7fb800), var(--lar-color-success-tint, rgb(139.8, 191.1, 25.5)) 50%, rgba(0, 0, 0, 0.08));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.1);
}

:host(.lar-color-success) input::-webkit-slider-thumb {
  border-color: var(--lar-color-success, #7fb800);
  box-shadow: 0 0 0 3px rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.2), 0 2px 8px -1px rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.3), 0 4px 16px -2px rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}

:host(.lar-color-success) input::-webkit-slider-thumb:hover {
  border-color: var(--lar-color-success-shade, rgb(111.76, 161.92, 0));
  box-shadow: 0 0 0 4px rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.25), 0 4px 12px -1px rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.4), 0 6px 20px -2px rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 2px rgba(0, 0, 0, 0.12);
}

:host(.lar-color-success) input::-webkit-slider-thumb:active {
  border-color: var(--lar-color-success-shade, rgb(111.76, 161.92, 0));
  box-shadow: 0 0 0 2px rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.3), 0 2px 6px -1px rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.35), 0 3px 12px -2px rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.25), inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

:host(.lar-color-success) input::-moz-range-thumb {
  border-color: var(--lar-color-success, #7fb800);
  box-shadow: 0 0 0 3px rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.2), 0 2px 8px -1px rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.3), 0 4px 16px -2px rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}

:host(.lar-color-success) input::-moz-range-thumb:hover {
  border-color: var(--lar-color-success-shade, rgb(111.76, 161.92, 0));
  box-shadow: 0 0 0 4px rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.25), 0 4px 12px -1px rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.4), 0 6px 20px -2px rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 2px rgba(0, 0, 0, 0.12);
}

:host(.lar-color-success) input::-moz-range-thumb:active {
  border-color: var(--lar-color-success-shade, rgb(111.76, 161.92, 0));
  box-shadow: 0 0 0 2px rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.3), 0 2px 6px -1px rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.35), 0 3px 12px -2px rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.25), inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

:host(.lar-color-warning) input::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--lar-color-warning, #ffb400), var(--lar-color-warning-tint, rgb(255, 187.5, 25.5)) 50%, rgba(0, 0, 0, 0.08));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.1);
}

:host(.lar-color-warning) input::-moz-range-track {
  background: linear-gradient(to right, var(--lar-color-warning, #ffb400), var(--lar-color-warning-tint, rgb(255, 187.5, 25.5)) 50%, rgba(0, 0, 0, 0.08));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.1);
}

:host(.lar-color-warning) input::-webkit-slider-thumb {
  border-color: var(--lar-color-warning, #ffb400);
  box-shadow: 0 0 0 3px rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.2), 0 2px 8px -1px rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.3), 0 4px 16px -2px rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}

:host(.lar-color-warning) input::-webkit-slider-thumb:hover {
  border-color: var(--lar-color-warning-shade, rgb(224.4, 158.4, 0));
  box-shadow: 0 0 0 4px rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.25), 0 4px 12px -1px rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.4), 0 6px 20px -2px rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 2px rgba(0, 0, 0, 0.12);
}

:host(.lar-color-warning) input::-webkit-slider-thumb:active {
  border-color: var(--lar-color-warning-shade, rgb(224.4, 158.4, 0));
  box-shadow: 0 0 0 2px rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.3), 0 2px 6px -1px rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.35), 0 3px 12px -2px rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.25), inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

:host(.lar-color-warning) input::-moz-range-thumb {
  border-color: var(--lar-color-warning, #ffb400);
  box-shadow: 0 0 0 3px rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.2), 0 2px 8px -1px rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.3), 0 4px 16px -2px rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}

:host(.lar-color-warning) input::-moz-range-thumb:hover {
  border-color: var(--lar-color-warning-shade, rgb(224.4, 158.4, 0));
  box-shadow: 0 0 0 4px rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.25), 0 4px 12px -1px rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.4), 0 6px 20px -2px rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 2px rgba(0, 0, 0, 0.12);
}

:host(.lar-color-warning) input::-moz-range-thumb:active {
  border-color: var(--lar-color-warning-shade, rgb(224.4, 158.4, 0));
  box-shadow: 0 0 0 2px rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.3), 0 2px 6px -1px rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.35), 0 3px 12px -2px rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.25), inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

:host(.lar-color-danger) input::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--lar-color-danger, #f6511d), var(--lar-color-danger-tint, rgb(246.9, 98.4, 51.6)) 50%, rgba(0, 0, 0, 0.08));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.1);
}

:host(.lar-color-danger) input::-moz-range-track {
  background: linear-gradient(to right, var(--lar-color-danger, #f6511d), var(--lar-color-danger-tint, rgb(246.9, 98.4, 51.6)) 50%, rgba(0, 0, 0, 0.08));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.1);
}

:host(.lar-color-danger) input::-webkit-slider-thumb {
  border-color: var(--lar-color-danger, #f6511d);
  box-shadow: 0 0 0 3px rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.2), 0 2px 8px -1px rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.3), 0 4px 16px -2px rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}

:host(.lar-color-danger) input::-webkit-slider-thumb:hover {
  border-color: var(--lar-color-danger-shade, rgb(216.48, 71.28, 25.52));
  box-shadow: 0 0 0 4px rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.25), 0 4px 12px -1px rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.4), 0 6px 20px -2px rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 2px rgba(0, 0, 0, 0.12);
}

:host(.lar-color-danger) input::-webkit-slider-thumb:active {
  border-color: var(--lar-color-danger-shade, rgb(216.48, 71.28, 25.52));
  box-shadow: 0 0 0 2px rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.3), 0 2px 6px -1px rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.35), 0 3px 12px -2px rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.25), inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

:host(.lar-color-danger) input::-moz-range-thumb {
  border-color: var(--lar-color-danger, #f6511d);
  box-shadow: 0 0 0 3px rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.2), 0 2px 8px -1px rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.3), 0 4px 16px -2px rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}

:host(.lar-color-danger) input::-moz-range-thumb:hover {
  border-color: var(--lar-color-danger-shade, rgb(216.48, 71.28, 25.52));
  box-shadow: 0 0 0 4px rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.25), 0 4px 12px -1px rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.4), 0 6px 20px -2px rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 2px rgba(0, 0, 0, 0.12);
}

:host(.lar-color-danger) input::-moz-range-thumb:active {
  border-color: var(--lar-color-danger-shade, rgb(216.48, 71.28, 25.52));
  box-shadow: 0 0 0 2px rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.3), 0 2px 6px -1px rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.35), 0 3px 12px -2px rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.25), inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

:host(.lar-color-light) input::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--lar-color-light, #f4f5f8), var(--lar-color-light-tint, rgb(245.1, 246, 248.7)) 50%, rgba(0, 0, 0, 0.08));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.1);
}

:host(.lar-color-light) input::-moz-range-track {
  background: linear-gradient(to right, var(--lar-color-light, #f4f5f8), var(--lar-color-light-tint, rgb(245.1, 246, 248.7)) 50%, rgba(0, 0, 0, 0.08));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.1);
}

:host(.lar-color-light) input::-webkit-slider-thumb {
  border-color: var(--lar-color-light, #f4f5f8);
  box-shadow: 0 0 0 3px rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.2), 0 2px 8px -1px rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.3), 0 4px 16px -2px rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}

:host(.lar-color-light) input::-webkit-slider-thumb:hover {
  border-color: var(--lar-color-light-shade, rgb(214.72, 215.6, 218.24));
  box-shadow: 0 0 0 4px rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.25), 0 4px 12px -1px rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.4), 0 6px 20px -2px rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 2px rgba(0, 0, 0, 0.12);
}

:host(.lar-color-light) input::-webkit-slider-thumb:active {
  border-color: var(--lar-color-light-shade, rgb(214.72, 215.6, 218.24));
  box-shadow: 0 0 0 2px rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.3), 0 2px 6px -1px rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.35), 0 3px 12px -2px rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.25), inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

:host(.lar-color-light) input::-moz-range-thumb {
  border-color: var(--lar-color-light, #f4f5f8);
  box-shadow: 0 0 0 3px rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.2), 0 2px 8px -1px rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.3), 0 4px 16px -2px rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}

:host(.lar-color-light) input::-moz-range-thumb:hover {
  border-color: var(--lar-color-light-shade, rgb(214.72, 215.6, 218.24));
  box-shadow: 0 0 0 4px rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.25), 0 4px 12px -1px rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.4), 0 6px 20px -2px rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 2px rgba(0, 0, 0, 0.12);
}

:host(.lar-color-light) input::-moz-range-thumb:active {
  border-color: var(--lar-color-light-shade, rgb(214.72, 215.6, 218.24));
  box-shadow: 0 0 0 2px rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.3), 0 2px 6px -1px rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.35), 0 3px 12px -2px rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.25), inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

:host(.lar-color-medium) input::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--lar-color-medium, #d6d6d6), var(--lar-color-medium-tint, rgb(218.1, 218.1, 218.1)) 50%, rgba(0, 0, 0, 0.08));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.1);
}

:host(.lar-color-medium) input::-moz-range-track {
  background: linear-gradient(to right, var(--lar-color-medium, #d6d6d6), var(--lar-color-medium-tint, rgb(218.1, 218.1, 218.1)) 50%, rgba(0, 0, 0, 0.08));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.1);
}

:host(.lar-color-medium) input::-webkit-slider-thumb {
  border-color: var(--lar-color-medium, #d6d6d6);
  box-shadow: 0 0 0 3px rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.2), 0 2px 8px -1px rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.3), 0 4px 16px -2px rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}

:host(.lar-color-medium) input::-webkit-slider-thumb:hover {
  border-color: var(--lar-color-medium-shade, rgb(188.32, 188.32, 188.32));
  box-shadow: 0 0 0 4px rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.25), 0 4px 12px -1px rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.4), 0 6px 20px -2px rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 2px rgba(0, 0, 0, 0.12);
}

:host(.lar-color-medium) input::-webkit-slider-thumb:active {
  border-color: var(--lar-color-medium-shade, rgb(188.32, 188.32, 188.32));
  box-shadow: 0 0 0 2px rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.3), 0 2px 6px -1px rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.35), 0 3px 12px -2px rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.25), inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

:host(.lar-color-medium) input::-moz-range-thumb {
  border-color: var(--lar-color-medium, #d6d6d6);
  box-shadow: 0 0 0 3px rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.2), 0 2px 8px -1px rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.3), 0 4px 16px -2px rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}

:host(.lar-color-medium) input::-moz-range-thumb:hover {
  border-color: var(--lar-color-medium-shade, rgb(188.32, 188.32, 188.32));
  box-shadow: 0 0 0 4px rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.25), 0 4px 12px -1px rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.4), 0 6px 20px -2px rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 2px rgba(0, 0, 0, 0.12);
}

:host(.lar-color-medium) input::-moz-range-thumb:active {
  border-color: var(--lar-color-medium-shade, rgb(188.32, 188.32, 188.32));
  box-shadow: 0 0 0 2px rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.3), 0 2px 6px -1px rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.35), 0 3px 12px -2px rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.25), inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

:host(.lar-color-dark) input::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--lar-color-dark, #222428), var(--lar-color-dark-tint, rgb(56.1, 57.9, 61.5)) 50%, rgba(0, 0, 0, 0.08));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.1);
}

:host(.lar-color-dark) input::-moz-range-track {
  background: linear-gradient(to right, var(--lar-color-dark, #222428), var(--lar-color-dark-tint, rgb(56.1, 57.9, 61.5)) 50%, rgba(0, 0, 0, 0.08));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.1);
}

:host(.lar-color-dark) input::-webkit-slider-thumb {
  border-color: var(--lar-color-dark, #222428);
  box-shadow: 0 0 0 3px rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.2), 0 2px 8px -1px rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.3), 0 4px 16px -2px rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}

:host(.lar-color-dark) input::-webkit-slider-thumb:hover {
  border-color: var(--lar-color-dark-shade, rgb(29.92, 31.68, 35.2));
  box-shadow: 0 0 0 4px rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.25), 0 4px 12px -1px rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.4), 0 6px 20px -2px rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 2px rgba(0, 0, 0, 0.12);
}

:host(.lar-color-dark) input::-webkit-slider-thumb:active {
  border-color: var(--lar-color-dark-shade, rgb(29.92, 31.68, 35.2));
  box-shadow: 0 0 0 2px rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.3), 0 2px 6px -1px rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.35), 0 3px 12px -2px rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.25), inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

:host(.lar-color-dark) input::-moz-range-thumb {
  border-color: var(--lar-color-dark, #222428);
  box-shadow: 0 0 0 3px rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.2), 0 2px 8px -1px rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.3), 0 4px 16px -2px rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}

:host(.lar-color-dark) input::-moz-range-thumb:hover {
  border-color: var(--lar-color-dark-shade, rgb(29.92, 31.68, 35.2));
  box-shadow: 0 0 0 4px rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.25), 0 4px 12px -1px rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.4), 0 6px 20px -2px rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 2px rgba(0, 0, 0, 0.12);
}

:host(.lar-color-dark) input::-moz-range-thumb:active {
  border-color: var(--lar-color-dark-shade, rgb(29.92, 31.68, 35.2));
  box-shadow: 0 0 0 2px rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.3), 0 2px 6px -1px rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.35), 0 3px 12px -2px rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.25), inset 0 1px 3px rgba(0, 0, 0, 0.15);
}