@cbpds/web-components/dist/collection/components/cbp-slider/cbp-slider.css

Web components for the CBP Design System.

/* 
 * Caution: "global styles" get injected into every component and can cause file size bloat.
 * These should only include SASS variables and mixins that are not written out to CSS directly
 */
/**
* @prop --cbp-slider-thumb-color: var(--cbp-color-interactive-secondary-dark);
* @prop --cbp-slider-thumb-color-hover: var(--cbp-color-interactive-secondary-darker);
* @prop --cbp-slider-thumb-color-focus: var(--cbp-color-interactive-focus-dark);
* @prop --cbp-slider-thumb-color-border: var(--cbp-color-background-light);
* @prop --cbp-slider-thumb-color-border-focus: var(--cbp-color-white);
* @prop --cbp-slider-thumb-color-halo: transparent;
* @prop --cbp-slider-thumb-color-halo-hover: var(--cbp-color-interactive-secondary-darker);
* @prop --cbp-slider-thumb-color-halo-focus: var(--cbp-color-interactive-focus-dark);
* @prop --cbp-slider-track-color-selected: var(--cbp-color-interactive-selected-dark);
* @prop --cbp-slider-track-color-unselected: var(--cbp-color-interactive-secondary-light);
* @prop --cbp-slider-thumb-color-dark: var(--cbp-color-interactive-secondary-light);
* @prop --cbp-slider-thumb-color-hover-dark: var(--cbp-color-interactive-secondary-lighter);
* @prop --cbp-slider-thumb-color-focus-dark: var(--cbp-color-interactive-focus-light);
* @prop --cbp-slider-thumb-color-border-dark: var(--cbp-color-background-dark);
* @prop --cbp-slider-thumb-color-border-focus-dark: var(--cbp-color-black);
* @prop --cbp-slider-thumb-color-halo-hover-dark: var(--cbp-color-interactive-secondary-lighter);
* @prop --cbp-slider-thumb-color-halo-focus-dark: var(--cbp-color-interactive-focus-light);
* @prop --cbp-slider-track-color-selected-dark: var(--cbp-color-interactive-selected-light);
* @prop --cbp-slider-track-color-unselected-dark: var(--cbp-color-interactive-secondary-base);
*/
:root {
  --cbp-slider-thumb-color: var(--cbp-color-interactive-secondary-dark);
  --cbp-slider-thumb-color-hover: var(--cbp-color-interactive-secondary-darker);
  --cbp-slider-thumb-color-focus: var(--cbp-color-interactive-focus-dark);
  --cbp-slider-thumb-color-border: var(--cbp-color-background-light);
  --cbp-slider-thumb-color-border-focus: var(--cbp-color-white);
  --cbp-slider-thumb-color-halo: transparent;
  --cbp-slider-thumb-color-halo-hover: var(--cbp-color-interactive-secondary-darker);
  --cbp-slider-thumb-color-halo-focus: var(--cbp-color-interactive-focus-dark);
  --cbp-slider-track-color-selected: var(--cbp-color-interactive-selected-dark);
  --cbp-slider-track-color-unselected: var(--cbp-color-interactive-secondary-light);
  --cbp-slider-thumb-color-dark: var(--cbp-color-interactive-secondary-light);
  --cbp-slider-thumb-color-hover-dark: var(--cbp-color-interactive-secondary-lighter);
  --cbp-slider-thumb-color-focus-dark: var(--cbp-color-interactive-focus-light);
  --cbp-slider-thumb-color-border-dark: var(--cbp-color-background-dark);
  --cbp-slider-thumb-color-border-focus-dark: var(--cbp-color-black);
  --cbp-slider-thumb-color-halo-hover-dark: var(--cbp-color-interactive-secondary-lighter);
  --cbp-slider-thumb-color-halo-focus-dark: var(--cbp-color-interactive-focus-light);
  --cbp-slider-track-color-selected-dark: var(--cbp-color-interactive-selected-light);
  --cbp-slider-track-color-unselected-dark: var(--cbp-color-interactive-secondary-base);
  --cbp-slider-track-selection-size: 0;
  --cbp-slider-track-selection-offset: 0;
}

[data-cbp-theme=light] cbp-slider[context*=dark],
[data-cbp-theme=dark] cbp-slider:not([context=dark-inverts]):not([context=light-always]) {
  --cbp-slider-thumb-color: var(--cbp-slider-thumb-color-dark);
  --cbp-slider-thumb-color-hover: var(--cbp-slider-thumb-color-hover-dark);
  --cbp-slider-thumb-color-focus: var(--cbp-slider-thumb-color-focus-dark);
  --cbp-slider-thumb-color-border: var(--cbp-slider-thumb-color-border-dark);
  --cbp-slider-thumb-color-border-focus: var(--cbp-slider-thumb-color-border-focus-dark);
  --cbp-slider-thumb-color-halo-hover: var(--cbp-slider-thumb-color-halo-hover-dark);
  --cbp-slider-thumb-color-halo-focus: var(--cbp-slider-thumb-color-halo-focus-dark);
  --cbp-slider-track-color-selected: var(--cbp-slider-track-color-selected-dark);
  --cbp-slider-track-color-unselected: var(--cbp-slider-track-color-unselected-dark);
}

cbp-slider {
  display: flex;
  align-items: center;
  gap: var(--cbp-space-2x);
  font-size: var(--cbp-font-size-subhead);
  font-weight: var(--cbp-font-weight-medium);
  font-style: italic;
}
cbp-slider > span {
  display: flex;
  align-items: center;
}
cbp-slider input[type=number] {
  width: 7ch;
}
cbp-slider input[type=number]::-webkit-outer-spin-button, cbp-slider input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
cbp-slider input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}
cbp-slider .cbp-slider-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  flex-grow: 1;
  width: 100%;
  height: 100%;
}
cbp-slider .cbp-slider-wrapper .cbp-slider-selection {
  position: absolute;
  display: block;
  background: var(--cbp-slider-track-color-selected);
  border-radius: var(--cbp-border-radius-pill);
  block-size: var(--cbp-space-2x);
  inline-size: 100%;
  transform-origin: left center;
  transform: scaleX(var(--cbp-slider-track-selection-size));
  margin-inline-start: var(--cbp-slider-track-selection-offset);
  pointer-events: none;
}
cbp-slider input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  outline: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
cbp-slider input[type=range]::-webkit-slider-runnable-track {
  background: var(--cbp-slider-track-color-unselected);
  height: var(--cbp-space-1x);
  border-radius: var(--cbp-border-radius-pill);
}
cbp-slider input[type=range]::-moz-range-track {
  background: var(--cbp-slider-track-color-unselected);
  height: var(--cbp-space-half-x);
  border-radius: var(--cbp-border-radius-pill);
}
cbp-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: calc(var(--cbp-space-4x) / 2 * -1);
  height: var(--cbp-space-5x);
  width: var(--cbp-space-5x);
  background-color: var(--cbp-slider-thumb-color);
  border: var(--cbp-border-size-md) solid var(--cbp-slider-thumb-color-border);
  border-radius: var(--cbp-border-radius-circle);
  box-shadow: 0 0 0 var(--cbp-space-11x) color-mix(in srgb, var(--cbp-slider-thumb-color-halo), transparent 50%);
  clip-path: circle(122%);
  pointer-events: all;
  z-index: 2;
}
cbp-slider input[type=range]::-moz-range-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: calc(var(--cbp-space-4x) / 2 * -1);
  height: var(--cbp-space-5x);
  width: var(--cbp-space-5x);
  background-color: var(--cbp-slider-thumb-color);
  border: var(--cbp-border-size-md) solid var(--cbp-slider-thumb-color-border);
  border-radius: var(--cbp-border-radius-circle);
  box-shadow: 0 0 0 var(--cbp-space-11x) color-mix(in srgb, var(--cbp-slider-thumb-color-halo), transparent 50%);
  clip-path: circle(122%);
  pointer-events: all;
  z-index: 2;
}
cbp-slider input[type=range]:last-of-type:not(:first-of-type) {
  position: absolute;
}
cbp-slider input[type=range]:last-of-type:not(:first-of-type)::-webkit-slider-runnable-track {
  background: transparent;
}
cbp-slider input[type=range]:last-of-type:not(:first-of-type)::-moz-range-track {
  background: transparent;
}
cbp-slider input[type=range]:hover:not(:disabled) {
  --cbp-slider-thumb-color-halo: var(--cbp-slider-thumb-color-halo-hover);
  --cbp-slider-thumb-color: var(--cbp-slider-thumb-color-hover);
}
cbp-slider input[type=range]:focus:not(:disabled) {
  --cbp-slider-thumb-color-halo: var(--cbp-slider-thumb-color-halo-focus);
  --cbp-slider-thumb-color: var(--cbp-slider-thumb-color-focus);
  --cbp-slider-thumb-color-border: var(--cbp-slider-thumb-color-border-focus);
}
cbp-slider input[type=range]:disabled {
  --cbp-slider-thumb-color: var(--cbp-color-interactive-secondary-dark);
  --cbp-slider-track-color-selected: var(--cbp-color-interactive-selected-dark);
  --cbp-slider-track-color-unselected: var(--cbp-color-interactive-secondary-light);
  --cbp-slider-thumb-color-dark: var(--cbp-color-interactive-disabled-light);
  --cbp-slider-track-color-selected-dark: var(--cbp-color-interactive-disabled-light);
  --cbp-slider-track-color-unselected-dark: var(--cbp-color-interactive-disabled-dark);
  cursor: not-allowed;
}
cbp-slider[variant=range] input[type=range] {
  pointer-events: none;
}
cbp-slider[variant=range] input[type=range]::-webkit-slider-runnable-track {
  pointer-events: none;
}
cbp-slider[variant=range] input[type=range]::-moz-range-track {
  pointer-events: none;
}