@cbpds/web-components/dist/collection/components/cbp-toggle/cbp-toggle.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-toggle-color-bg: var(--cbp-color-interactive-secondary-light);
* @prop   --cbp-toggle-color-bg-dark: var(--cbp-color-interactive-secondary-dark);
* @prop   --cbp-toggle-color-circle: var(--cbp-color-white);
* @prop   --cbp-toggle-color-circle-dark: var(--cbp-color-white);
* @prop   --cbp-toggle-color-circle-border: var(--cbp-toggle-color-circle);
* @prop   --cbp-toggle-color-circle-border-dark: var(--cbp-toggle-color-circle-dark);
* @prop   --cbp-toggle-outline-width: 2px;
* @prop   --cbp-toggle-outline-style: solid;
* @prop   --cbp-toggle-outline-color: transparent;
* @prop   --cbp-toggle-outline: var(--cbp-toggle-outline-width) var(--cbp-toggle-outline-style) var(--cbp-toggle-outline-color);
* @prop   --cbp-toggle-outline-color-dark: 2px solid transparent;
* @prop   --cbp-toggle-outline-dark: var(--cbp-toggle-outline-width) var(--cbp-toggle-outline-style) var(--cbp-toggle-outline-color-dark);
* @prop   --cbp-toggle-color-bg-hover: var(--cbp-color-interactive-secondary-dark);
* @prop   --cbp-toggle-color-bg-hover-dark: var(--cbp-color-interactive-secondary-base);
* @prop   --cbp-toggle-circle-selected-color-hover: var(--cbp-color-interactive-selected-dark);
* @prop   --cbp-toggle-circle-selected-color-hover-dark: var(--cbp-color-interactive-selected-light);
* @prop   --cbp-toggle-circle-selected-border-color-hover: var(--cbp-color-white);
* @prop   --cbp-toggle-circle-selected-border-color-hover-dark: var(--cbp-color-interactive-secondary-darker);
* @prop   --cbp-toggle-color-circle-hover: var(--cbp-color-interactive-secondary-darker);
* @prop   --cbp-toggle-color-circle-hover-dark: var(--cbp-color-interactive-secondary-base);
* @prop   --cbp-toggle-color-circle-border-hover: var(--cbp-color-white);
* @prop   --cbp-toggle-color-circle-border-hover-dark: var(--cbp-color-white);
* @prop   --cbp-toggle-color-bg-focus: var(--cbp-color-interactive-focus-dark);
* @prop   --cbp-toggle-color-bg-focus-dark: var(--cbp-color-interactive-focus-light);
* @prop   --cbp-toggle-outline-focus: 2px solid var(--cbp-color-white);
* @prop   --cbp-toggle-outline-focus-dark: 2px solid var(--cbp-color-black);
* @prop   --cbp-toggle-color-bg-disabled: var(--cbp-color-interactive-disabled-dark);
* @prop   --cbp-toggle-color-bg-disabled-dark: var(--cbp-color-interactive-disabled-light);
* @prop   --cbp-toggle-color-circle-disabled: var(--cbp-color-interactive-disabled-light);
* @prop   --cbp-toggle-color-circle-disabled-dark: var(--cbp-color-interactive-disabled-dark);
* @prop   --cbp-toggle-color-circle-border-disabled: var(--cbp-color-interactive-disabled-light);
* @prop   --cbp-toggle-color-circle-border-disabled-dark: var(--cbp-color-interactive-disabled-dark);
* @prop   --cbp-toggle-control-width: 3.25rem;
* @prop   --cbp-toggle-control-height: 1.75rem;
* @prop   --cbp-toggle-circle-diameter: 1rem;
* @prop   --cbp-toggle-circle-inset: 0.375rem;
* @prop   --cbp-toggle-circle-border-width: 0.25rem;
* @prop   --cbp-toggle-gap: 1rem;  
* @prop   --cbp-toggle-margin: 0 0 var(--cbp-space-4x) 0;  
*/
:root {
  --cbp-toggle-color-bg: var(--cbp-color-interactive-secondary-light);
  --cbp-toggle-color-bg-dark: var(--cbp-color-interactive-secondary-dark);
  --cbp-toggle-color-bg-selected: var(--cbp-color-interactive-selected-dark);
  --cbp-toggle-color-bg-selected-dark: var(--cbp-color-interactive-selected-light);
  --cbp-toggle-color-circle: var(--cbp-color-white);
  --cbp-toggle-color-circle-dark: var(--cbp-color-white);
  --cbp-toggle-circle-selected-color:var(--cbp-color-white);
  --cbp-toggle-circle-selected-color-dark:var(--cbp-color-interactive-secondary-darker);
  --cbp-toggle-color-circle-border: var(--cbp-toggle-color-circle);
  --cbp-toggle-color-circle-border-dark: var(--cbp-toggle-color-circle-dark);
  --cbp-toggle-circle-selected-border-color: var(--cbp-color-white);
  --cbp-toggle-circle-selected-border-color-dark: var(--cbp-color-interactive-secondary-darker);
  --cbp-toggle-outline-width: 2px;
  --cbp-toggle-outline-style: solid;
  --cbp-toggle-outline-color: transparent;
  --cbp-toggle-outline-color-dark: transparent;
  /** Hover */
  --cbp-toggle-color-bg-hover: var(--cbp-color-interactive-secondary-dark);
  --cbp-toggle-color-bg-hover-dark: var(--cbp-color-interactive-secondary-base);
  --cbp-toggle-circle-selected-color-hover: var(--cbp-color-interactive-selected-dark);
  --cbp-toggle-circle-selected-color-hover-dark: var(--cbp-color-interactive-selected-light);
  --cbp-toggle-circle-selected-border-color-hover: var(--cbp-color-white);
  --cbp-toggle-circle-selected-border-color-hover-dark: var(--cbp-color-interactive-secondary-darker);
  --cbp-toggle-color-circle-hover: var(--cbp-color-interactive-secondary-darker);
  --cbp-toggle-color-circle-hover-dark: var(--cbp-color-interactive-secondary-base);
  --cbp-toggle-color-circle-border-hover: var(--cbp-color-white);
  --cbp-toggle-color-circle-border-hover-dark: var(--cbp-color-white);
  /** Focus */
  --cbp-toggle-color-bg-focus: var(--cbp-color-interactive-focus-dark);
  --cbp-toggle-color-bg-focus-dark: var(--cbp-color-interactive-focus-light);
  --cbp-toggle-outline-color-focus: var(--cbp-color-white);
  --cbp-toggle-outline-color-focus-dark: var(--cbp-color-black);
  --cbp-toggle-circle-selected-color-focus: var(--cbp-color-white);
  --cbp-toggle-circle-selected-color-focus-dark: var(--cbp-color-black);
  --cbp-toggle-circle-selected-border-color-focus: var(--cbp-color-white);
  --cbp-toggle-circle-selected-border-color-focus-dark: var(--cbp-color-black);
  --cbp-toggle-color-circle-focus: var(--cbp-color-white);
  --cbp-toggle-color-circle-focus-dark: var(--cbp-color-black);
  --cbp-toggle-color-circle-border-focus: var(--cbp-color-white);
  --cbp-toggle-color-circle-border-focus-dark: var(--cbp-color-black);
  /** Disabled */
  --cbp-toggle-color-bg-disabled: var(--cbp-color-interactive-disabled-dark);
  --cbp-toggle-color-bg-disabled-dark: var(--cbp-color-interactive-disabled-light);
  --cbp-toggle-color-circle-disabled: var(--cbp-color-interactive-disabled-light);
  --cbp-toggle-color-circle-disabled-dark: var(--cbp-color-interactive-disabled-dark);
  --cbp-toggle-color-circle-border-disabled: var(--cbp-color-interactive-disabled-light);
  --cbp-toggle-color-circle-border-disabled-dark: var(--cbp-color-interactive-disabled-dark);
  --cbp-toggle-text-color: var(--cbp-color-text-darkest);
  --cbp-toggle-text-color-dark: var(--cbp-color-text-lightest);
  --cbp-toggle-control-width: 3.25rem;
  --cbp-toggle-control-height: 1.75rem;
  --cbp-toggle-circle-diameter: 1rem;
  --cbp-toggle-circle-inset: 0.375rem;
  --cbp-toggle-circle-border-width: 0.25rem;
  --cbp-status-text-width: var(--cbp-space-16x);
  --cbp-toggle-description-text-width: min-content;
  --cbp-toggle-gap: var(--cbp-space-4x);
  --cbp-toggle-margin: 0 0 var(--cbp-space-4x) 0;
}

[data-cbp-theme=light] cbp-toggle[context*=dark]:not([context=light-always]),
[data-cbp-theme=dark] cbp-toggle:not([context=dark-inverts]):not([context=light-always]) {
  --cbp-toggle-color-bg: var(--cbp-toggle-color-bg-dark);
  --cbp-toggle-color-bg-selected: var(--cbp-toggle-color-bg-selected-dark);
  --cbp-toggle-color-circle: var(--cbp-toggle-color-circle-dark);
  --cbp-toggle-color-circle-border: var(--cbp-toggle-color-circle-border-dark);
  --cbp-toggle-circle-selected-color: var(--cbp-toggle-circle-selected-color-dark);
  --cbp-toggle-circle-selected-border-color: var(--cbp-toggle-circle-selected-border-color-dark);
  --cbp-toggle-outline-color: var(--cbp-toggle-outline-color-dark);
  --cbp-toggle-color-bg-hover: var(--cbp-toggle-color-bg-hover-dark);
  --cbp-toggle-circle-selected-color-hover: var(--cbp-toggle-circle-selected-color-hover-dark);
  --cbp-toggle-circle-selected-border-color-hover: var(--cbp-toggle-circle-selected-border-color-hover-dark);
  --cbp-toggle-color-circle-hover: var(--cbp-toggle-color-circle-hover-dark);
  --cbp-toggle-color-circle-border-hover: var(--cbp-toggle-color-circle-border-hover-dark);
  --cbp-toggle-color-bg-focus: var(--cbp-toggle-color-bg-focus-dark);
  --cbp-toggle-outline-color-focus: var(--cbp-toggle-outline-color-focus-dark);
  --cbp-toggle-circle-selected-color-focus: var(--cbp-toggle-circle-selected-color-focus-dark);
  --cbp-toggle-circle-selected-border-color-focus: var(--cbp-toggle-circle-selected-border-color-focus-dark);
  --cbp-toggle-color-circle-focus: var(--cbp-toggle-color-circle-focus-dark);
  --cbp-toggle-color-circle-border-focus: var(--cbp-toggle-color-circle-border-focus-dark);
  --cbp-toggle-color-bg-disabled: var(--cbp-toggle-color-bg-disabled-dark);
  --cbp-toggle-color-circle-disabled: var(--cbp-toggle-color-circle-disabled-dark);
  --cbp-toggle-color-circle-border-disabled: var(--cbp-toggle-color-circle-border-disabled-dark);
  --cbp-toggle-text-color: var(--cbp-toggle-text-color-dark);
}

cbp-toggle {
  display: flex;
  align-items: center;
  margin: var(--cbp-toggle-margin);
  color: var(--cbp-toggle-text-color);
  /** 'On' States */
  /** 'Off' States */
  /** Disabled*/
}
cbp-toggle label {
  display: grid;
  grid-template-columns: 3fr var(--cbp-toggle-control-width) 1fr;
  gap: var(--cbp-toggle-gap);
  align-items: center;
  width: 100%;
}
cbp-toggle input[type=checkbox] {
  all: unset;
  appearance: none;
  height: var(--cbp-toggle-control-height);
  min-width: var(--cbp-toggle-control-width);
  flex-basis: var(--cbp-toggle-control-width);
  border-radius: var(--cbp-border-radius-pill);
  background-color: var(--cbp-toggle-color-bg);
  outline: var(--cbp-toggle-outline-width) var(--cbp-toggle-outline-style) var(--cbp-toggle-outline-color);
  outline-offset: calc(-1 * var(--cbp-space-1x));
}
cbp-toggle input[type=checkbox]:before {
  content: "";
  display: block;
  margin-top: var(--cbp-toggle-circle-inset);
  border-radius: var(--cbp-border-radius-circle);
  height: var(--cbp-toggle-circle-diameter);
  width: var(--cbp-toggle-circle-diameter);
  background-color: var(--cbp-toggle-color-circle);
  border: var(--cbp-toggle-circle-border-width) solid var(--cbp-toggle-color-circle-border);
}
cbp-toggle span:last-child {
  flex-basis: var(--cbp-status-text-width);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
cbp-toggle[checked] input[type=checkbox] {
  --cbp-toggle-color-bg: var(--cbp-toggle-color-bg-selected);
  --cbp-toggle-color-circle: var(--cbp-toggle-circle-selected-color);
  --cbp-toggle-color-circle-border: var(--cbp-toggle-circle-selected-border-color);
}
cbp-toggle[checked] input[type=checkbox]:before {
  margin-left: calc(var(--cbp-toggle-control-width) - var(--cbp-toggle-circle-diameter) - var(--cbp-toggle-circle-inset));
}
cbp-toggle[checked] input[type=checkbox]:hover:not([disabled]) {
  --cbp-toggle-color-circle: var(--cbp-toggle-circle-selected-color-hover);
  --cbp-toggle-color-circle-border: var(--cbp-toggle-circle-selected-border-color-hover);
}
cbp-toggle[checked] input[type=checkbox]:focus:not([disabled]) {
  --cbp-toggle-color-bg: var(--cbp-toggle-color-bg-focus);
  --cbp-toggle-outline-color: var(--cbp-toggle-outline-color-focus);
  --cbp-toggle-color-circle: var(--cbp-toggle-circle-selected-color-focus);
  --cbp-toggle-color-circle-border: var(--cbp-toggle-circle-selected-border-color-focus);
}
cbp-toggle:not([checked]) input[type=checkbox]:before {
  margin-left: var(--cbp-toggle-circle-inset);
}
cbp-toggle:not([checked]) input[type=checkbox]:hover:not([disabled]) {
  --cbp-toggle-color-bg: var(--cbp-toggle-color-bg-hover);
  --cbp-toggle-color-circle: var(--cbp-toggle-color-circle-hover);
  --cbp-toggle-color-circle-border: var(--cbp-toggle-color-circle-border-hover);
  --cbp-toggle-color-bg-dark: var(--cbp-toggle-color-bg-hover-dark);
  --cbp-toggle-color-circle-dark: var(--cbp-toggle-color-circle-hover-dark);
  --cbp-toggle-color-circle-border-dark: var(--cbp-toggle-color-circle-border-hover-dark);
}
cbp-toggle:not([checked]) input[type=checkbox]:focus:not([disabled]) {
  --cbp-toggle-color-bg: var(--cbp-toggle-color-bg-focus);
  --cbp-toggle-outline-color: var(--cbp-toggle-outline-color-focus);
  --cbp-toggle-color-bg-dark: var(--cbp-toggle-color-bg-focus-dark);
  --cbp-toggle-outline-color-dark: var(--cbp-toggle-outline-color-focus-dark);
  --cbp-toggle-color-circle: var(--cbp-toggle-color-circle-focus);
  --cbp-toggle-color-circle-border: var(--cbp-toggle-color-circle-border-focus);
}
cbp-toggle[disabled] {
  --cbp-toggle-color-bg: var(--cbp-toggle-color-bg-disabled);
  --cbp-toggle-color-bg-dark: var(--cbp-toggle-color-bg-disabled-dark);
  --cbp-toggle-color-circle: var(--cbp-toggle-color-circle-disabled);
  --cbp-toggle-color-circle-dark: var(--cbp-toggle-color-circle-disabled-dark);
  --cbp-toggle-color-circle-border: var(--cbp-toggle-color-circle-border-disabled);
  --cbp-toggle-color-circle-border-dark: var(--cbp-toggle-color-circle-border-disabled-dark);
}
cbp-toggle:focus-visible {
  outline: none;
}