@cbpds/web-components/dist/collection/components/cbp-checkbox/cbp-checkbox.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-checkbox-color: var(--cbp-color-text-lightest);
* @prop --cbp-checkbox-color-bg: var(--cbp-color-white);
* @prop --cbp-checkbox-color-border: var(--cbp-color-interactive-secondary-dark);
* @prop --cbp-checkbox-color-border-hover: var(--cbp-color-interactive-secondary-darker);
* @prop --cbp-checkbox-color-border-focus: var(--cbp-color-interactive-focus-dark);
* @prop --cbp-checkbox-color-halo: transparent;
* @prop --cbp-checkbox-color-halo-hover: var(--cbp-color-interactive-secondary-lighter);
* @prop --cbp-checkbox-color-halo-focus: var(--cbp-color-interactive-focus-light);
* @prop --cbp-checkbox-color-bg-checked: var(--cbp-color-interactive-selected-dark);
* @prop --cbp-checkbox-color-bg-checked-focus: var(--cbp-color-interactive-focus-dark);
* @prop --cbp-checkbox-color-border-checked: var(--cbp-color-interactive-selected-dark);
* @prop --cbp-checkbox-color-border-checked-hover: var(--cbp-color-interactive-selected-dark);
* @prop --cbp-checkbox-color-border-checked-focus: var(--cbp-color-white);
* @prop --cbp-checkbox-color-halo-checked-hover: var(--cbp-color-interactive-selected-light);
* @prop --cbp-checkbox-color-halo-checked-focus: var(--cbp-color-interactive-focus-light);
* @prop --cbp-checkbox-color-label: var(--cbp-color-text-darkest);

* @prop --cbp-checkbox-color-dark: var(--cbp-color-text-darkest);
* @prop --cbp-checkbox-color-bg-dark: var(--cbp-color-gray-cool-70);
* @prop --cbp-checkbox-color-border-dark: var(--cbp-color-interactive-secondary-light);
* @prop --cbp-checkbox-color-border-hover-dark: var(--cbp-color-interactive-secondary-lighter);
* @prop --cbp-checkbox-color-border-focus-dark: var(--cbp-color-interactive-focus-light);
* @prop --cbp-checkbox-color-halo-dark: transparent;
* @prop --cbp-checkbox-color-halo-hover-dark: var(--cbp-color-text-darker);
* @prop --cbp-checkbox-color-halo-focus-dark: var(--cbp-color-interactive-focus-dark);
* @prop --cbp-checkbox-color-bg-checked-dark: var(--cbp-color-interactive-selected-light);
* @prop --cbp-checkbox-color-bg-checked-focus-dark: var(--cbp-color-interactive-focus-light);
* @prop --cbp-checkbox-color-border-checked-dark: var(--cbp-color-interactive-selected-light);
* @prop --cbp-checkbox-color-border-checked-hover-dark: var(--cbp-color-interactive-selected-light);
* @prop --cbp-checkbox-color-border-checked-focus-dark: var(--cbp-color-black);
* @prop --cbp-checkbox-color-halo-checked-hover-dark: var(--cbp-color-interactive-selected-dark);
* @prop --cbp-checkbox-color-halo-checked-focus-dark: var(--cbp-color-interactive-focus-dark);
* @prop --cbp-checkbox-color-label-dark: var(--cbp-color-text-lightest);

* @prop --cbp-checkbox-min-height: var(--cbp-space-11x);
* @prop --cbp-checkbox-margin: 0 0 var(--cbp-space-1x) 0;
* @prop --cbp-checkbox-font-weight-label: var(--cbp-font-weight-bold);
*/
:root {
  --cbp-checkbox-color: var(--cbp-color-text-lightest);
  --cbp-checkbox-color-bg: var(--cbp-color-white);
  --cbp-checkbox-color-border: var(--cbp-color-interactive-secondary-dark);
  --cbp-checkbox-color-border-hover: var(--cbp-color-interactive-secondary-darker);
  --cbp-checkbox-color-border-focus: var(--cbp-color-interactive-focus-dark);
  --cbp-checkbox-color-halo: transparent;
  --cbp-checkbox-color-halo-hover: var(--cbp-color-interactive-secondary-lighter);
  --cbp-checkbox-color-halo-focus: var(--cbp-color-interactive-focus-light);
  --cbp-checkbox-color-bg-checked: var(--cbp-color-interactive-selected-dark);
  --cbp-checkbox-color-bg-checked-focus: var(--cbp-color-interactive-focus-dark);
  --cbp-checkbox-color-border-checked: var(--cbp-color-interactive-selected-dark);
  --cbp-checkbox-color-border-checked-hover: var(--cbp-color-interactive-selected-dark);
  --cbp-checkbox-color-border-checked-focus: var(--cbp-color-white);
  --cbp-checkbox-color-halo-checked-hover: var(--cbp-color-interactive-selected-light);
  --cbp-checkbox-color-halo-checked-focus: var(--cbp-color-interactive-focus-light);
  --cbp-checkbox-color-label: var(--cbp-color-text-darkest);
  --cbp-checkbox-color-dark: var(--cbp-color-text-darkest);
  --cbp-checkbox-color-bg-dark: var(--cbp-color-gray-cool-70);
  --cbp-checkbox-color-border-dark: var(--cbp-color-interactive-secondary-light);
  --cbp-checkbox-color-border-hover-dark: var(--cbp-color-interactive-secondary-lighter);
  --cbp-checkbox-color-border-focus-dark: var(--cbp-color-interactive-focus-light);
  --cbp-checkbox-color-halo-dark: transparent;
  --cbp-checkbox-color-halo-hover-dark: var(--cbp-color-text-darker);
  --cbp-checkbox-color-halo-focus-dark: var(--cbp-color-interactive-focus-dark);
  --cbp-checkbox-color-bg-checked-dark: var(--cbp-color-interactive-selected-light);
  --cbp-checkbox-color-bg-checked-focus-dark: var(--cbp-color-interactive-focus-light);
  --cbp-checkbox-color-border-checked-dark: var(--cbp-color-interactive-selected-light);
  --cbp-checkbox-color-border-checked-hover-dark: var(--cbp-color-interactive-selected-light);
  --cbp-checkbox-color-border-checked-focus-dark: var(--cbp-color-black);
  --cbp-checkbox-color-halo-checked-hover-dark: var(--cbp-color-interactive-selected-dark);
  --cbp-checkbox-color-halo-checked-focus-dark: var(--cbp-color-interactive-focus-dark);
  --cbp-checkbox-color-label-dark: var(--cbp-color-text-lightest);
  --cbp-checkbox-min-height: var(--cbp-space-11x);
  --cbp-checkbox-margin: 0 0 var(--cbp-space-1x) 0;
  --cbp-checkbox-font-weight-label: var(--cbp-font-weight-bold);
}

[data-cbp-theme=light] cbp-checkbox[context*=dark],
[data-cbp-theme=dark] cbp-checkbox:not([context=dark-inverts]):not([context=light-always]) {
  --cbp-checkbox-color: var(--cbp-checkbox-color-dark);
  --cbp-checkbox-color-bg: var(--cbp-checkbox-color-bg-dark);
  --cbp-checkbox-color-border: var(--cbp-checkbox-color-border-dark);
  --cbp-checkbox-color-border-hover: var(--cbp-checkbox-color-border-hover-dark);
  --cbp-checkbox-color-border-focus: var(--cbp-checkbox-color-border-focus-dark);
  --cbp-checkbox-color-halo: var(--cbp-checkbox-color-halo-dark);
  --cbp-checkbox-color-halo-hover: var(--cbp-checkbox-color-halo-hover-dark);
  --cbp-checkbox-color-halo-focus: var(--cbp-checkbox-color-halo-focus-dark);
  --cbp-checkbox-color-bg-checked: var(--cbp-checkbox-color-bg-checked-dark);
  --cbp-checkbox-color-bg-checked-focus: var(--cbp-checkbox-color-bg-checked-focus-dark);
  --cbp-checkbox-color-border-checked: var(--cbp-checkbox-color-border-checked-dark);
  --cbp-checkbox-color-border-checked-hover: var(--cbp-checkbox-color-border-checked-hover-dark);
  --cbp-checkbox-color-border-checked-focus: var(--cbp-checkbox-color-border-checked-focus-dark);
  --cbp-checkbox-color-halo-checked-hover: var(--cbp-checkbox-color-halo-checked-hover-dark);
  --cbp-checkbox-color-halo-checked-focus: var(--cbp-checkbox-color-halo-checked-focus-dark);
  --cbp-checkbox-color-label: var(--cbp-checkbox-color-label-dark);
}

cbp-checkbox {
  display: block;
  margin: var(--cbp-checkbox-margin);
  position: relative;
}
cbp-checkbox label {
  display: grid;
  grid-template-columns: var(--cbp-space-6x) 1fr;
  align-items: center;
  gap: var(--cbp-space-2x);
  min-height: var(--cbp-checkbox-min-height);
  font-weight: var(--cbp-checkbox-font-weight-label);
  color: var(--cbp-checkbox-color-label);
}
cbp-checkbox input[type=checkbox] {
  appearance: none;
  display: grid;
  place-content: center;
  flex-grow: 0;
  color: var(--cbp-checkbox-color);
  background-color: var(--cbp-checkbox-color-bg);
  min-height: unset;
  height: var(--cbp-space-6x);
  width: var(--cbp-space-6x);
  margin: 0;
  border-color: var(--cbp-checkbox-color-border);
  border-style: solid;
  border-width: var(--cbp-border-size-md);
  border-radius: var(--cbp-border-radius-soft);
  outline: 0;
  box-shadow: 0 0 0 calc(var(--cbp-space-5x) / 2) var(--cbp-checkbox-color-halo);
  clip-path: circle(86%);
}
cbp-checkbox input[type=checkbox]::before {
  content: "";
  overflow: hidden;
}
cbp-checkbox input[type=checkbox]:hover {
  --cbp-checkbox-color-border: var(--cbp-checkbox-color-border-hover);
  --cbp-checkbox-color-halo: var(--cbp-checkbox-color-halo-hover);
}
cbp-checkbox input[type=checkbox]:focus {
  --cbp-checkbox-color-border: var(--cbp-checkbox-color-border-focus);
  --cbp-checkbox-color-halo: var(--cbp-checkbox-color-halo-focus);
}
cbp-checkbox input[type=checkbox]:checked, cbp-checkbox input[type=checkbox]:indeterminate {
  --cbp-checkbox-color-bg: var(--cbp-checkbox-color-bg-checked);
  --cbp-checkbox-color-border: var(--cbp-checkbox-color-border-checked);
}
cbp-checkbox input[type=checkbox]:checked:hover, cbp-checkbox input[type=checkbox]:indeterminate:hover {
  --cbp-checkbox-color-border: var(--cbp-checkbox-color-border-checked-hover);
  --cbp-checkbox-color-halo: var(--cbp-checkbox-color-halo-checked-hover);
}
cbp-checkbox input[type=checkbox]:checked:focus, cbp-checkbox input[type=checkbox]:indeterminate:focus {
  --cbp-checkbox-color-bg: var(--cbp-checkbox-color-bg-checked-focus);
  --cbp-checkbox-color-border: var(--cbp-checkbox-color-border-checked-focus);
  --cbp-checkbox-color-halo: var(--cbp-checkbox-color-halo-checked-focus);
}
cbp-checkbox input[type=checkbox]:checked::before {
  height: var(--cbp-space-4x);
  width: var(--cbp-space-2x);
  border-right: solid var(--cbp-border-size-xl) var(--cbp-checkbox-color);
  border-bottom: solid var(--cbp-border-size-xl) var(--cbp-checkbox-color);
  transform: rotate(45deg) translateY(-10%) translateX(-10%);
}
cbp-checkbox input[type=checkbox]:indeterminate::before {
  height: 0;
  width: var(--cbp-space-4x);
  border: solid var(--cbp-border-size-md) var(--cbp-checkbox-color);
  border-radius: var(--cbp-border-radius-soft);
}
cbp-checkbox[disabled], cbp-checkbox:has(*:disabled) {
  cursor: not-allowed;
}
cbp-checkbox[disabled] label, cbp-checkbox:has(*:disabled) label {
  font-style: italic;
  cursor: not-allowed;
}
cbp-checkbox[disabled], cbp-checkbox:has(*:disabled) {
  --cbp-checkbox-color: var(--cbp-color-interactive-disabled-light);
  --cbp-checkbox-color-bg: var(--cbp-color-interactive-disabled-light);
  --cbp-checkbox-color-border: var(--cbp-color-interactive-disabled-dark);
  --cbp-checkbox-color-border-hover: var(--cbp-color-interactive-disabled-dark);
  --cbp-checkbox-color-bg-checked: var(--cbp-color-interactive-disabled-dark);
  --cbp-checkbox-color-border-checked: var(--cbp-color-interactive-disabled-dark);
  --cbp-checkbox-color-border-checked-hover: var(--cbp-color-interactive-disabled-dark);
  --cbp-checkbox-color-halo-hover: transparent;
  --cbp-checkbox-color-halo-checked-hover: transparent;
  --cbp-checkbox-color-label: var(--cbp-color-interactive-disabled-dark);
  --cbp-checkbox-color-dark: var(--cbp-color-interactive-disabled-dark);
  --cbp-checkbox-color-bg-dark: var(--cbp-color-interactive-disabled-dark);
  --cbp-checkbox-color-border-dark: var(--cbp-color-interactive-disabled-light);
  --cbp-checkbox-color-border-hover-dark: var(--cbp-color-interactive-disabled-light);
  --cbp-checkbox-color-bg-checked-dark: var(--cbp-color-interactive-disabled-light);
  --cbp-checkbox-color-border-checked-dark: var(--cbp-color-interactive-disabled-light);
  --cbp-checkbox-color-border-checked-hover-dark: var(--cbp-color-interactive-disabled-light);
  --cbp-checkbox-color-halo-hover-dark: transparent;
  --cbp-checkbox-color-halo-checked-hover-dark: transparent;
  --cbp-checkbox-color-label-dark: var(--cbp-color-interactive-disabled-light);
}