@cbpds/web-components/dist/collection/components/cbp-card/cbp-card.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-card-color-background: var(--cbp-color-white)
 * @prop --cbp-card-color-background-dark: var(--cbp-color-gray-cool-60);
 * @prop --cbp-card-color-border: var(--cbp-color-gray-cool-10);
 * @prop --cbp-card-color-border-dark: var(--cbp-color-gray-cool-50);
 * @prop --cbp-card-color-title: var(--cbp-color-text-darker);
 * @prop --cbp-card-color-title-dark: var(--cbp-color-text-lighter);
 * @prop --cbp-banner-card-color: var(--cbp-color-gray-cool-60);
 * @prop --cbp-banner-card-color-dark: var(--cbp-color-gray-cool-20);
 * @prop --cbp-banner-card-color-title: var(--cbp-color-text-lighter);
 * @prop --cbp-banner-card-color-title-dark: var(--cbp-color-text-darker);
 * @prop --cbp-banner-card-color-body-background: var(--cbp-color-white);
 * @prop --cbp-banner-card-color-body-background-dark: var(--cbp-color-gray-cool-60);
 * @prop --cbp-banner-card-color-border: var(--cbp-color-base-neutral-lighter);
 * @prop --cbp-banner-card-color-border-dark: var(--cbp-color-gray-cool-50);

 * @prop  --cbp-flag-card-min-width: 7rem;
 * @prop  --cbp-flag-card-color: var(--cbp-color-text-lighter);
 * @prop  --cbp-flag-card-color-dark: var(--cbp-color-text-darker);
 * @prop  --cbp-flag-card-color-background: var(--cbp-color-gray-cool-60);
 * @prop  --cbp-flag-card-color-background-dark: var(--cbp-color-gray-cool-30);

  * @prop  --cbp-card-outline-focus: var(--cbp-color-white);
  * @prop  --cbp-card-outline-focus-dark: var(--cbp-color-black);
  * @prop  --cbp-card-danger-outline-focus: var(--cbp-color-white);
  * @prop  --cbp-card-danger-outline-focus-dark: var(--cbp-color-black);

  * @prop  --cbp-card-color-background-selected: var(--cbp-color-interactive-selected-dark);
  * @prop  --cbp-card-color-background-selected-dark: var(--cbp-color-interactive-selected-light);
  * @prop  --cbp-card-color-border-selected: var(--cbp-color-interactive-secondary-light);
  * @prop  --cbp-card-color-border-selected-dark: var(--cbp-color-interactive-secondary-base);
  * @prop  --cbp-card-color-title-selected: var(--cbp-color-text-lighter);
  * @prop  --cbp-card-color-title-selected-dark: var(--cbp-color-text-darker);
  * @prop  --cbp-card-color-text-selected: var(--cbp-color-text-lighter);
  * @prop  --cbp-card-color-text-selected-dark: var(--cbp-color-text-darker);  
*/
:root {
  --cbp-card-color-background: var(--cbp-color-white);
  --cbp-card-color-background-dark: var(--cbp-color-gray-cool-70);
  --cbp-card-color-border: var(--cbp-color-gray-cool-10);
  --cbp-card-color-border-dark: var(--cbp-color-gray-cool-50);
  --cbp-card-color-title: var(--cbp-color-text-darker);
  --cbp-card-color-title-dark: var(--cbp-color-text-lighter);
  --cbp-card-color-text: var(--cbp-color-text-darkest);
  --cbp-card-color-text-dark: var(--cbp-color-text-lightest);
  --cbp-banner-card-color: var(--cbp-color-gray-cool-60);
  --cbp-banner-card-color-dark: var(--cbp-color-gray-cool-20);
  --cbp-banner-card-color-title: var(--cbp-color-text-lighter);
  --cbp-banner-card-color-title-dark: var(--cbp-color-text-darker);
  --cbp-banner-card-color-body-background: var(--cbp-color-white);
  --cbp-banner-card-color-body-background-dark: var(--cbp-color-gray-cool-60);
  --cbp-banner-card-color-border: var(--cbp-color-base-neutral-lighter);
  --cbp-banner-card-color-border-dark: var(--cbp-color-gray-cool-50);
  --cbp-flag-card-min-width: 7rem;
  --cbp-flag-card-color: var(--cbp-color-text-lighter);
  --cbp-flag-card-color-dark: var(--cbp-color-text-darker);
  --cbp-flag-card-color-background: var(--cbp-color-gray-cool-60);
  --cbp-flag-card-color-background-dark: var(--cbp-color-gray-cool-30);
  --cbp-card-outline-color-focus: var(--cbp-color-white);
  --cbp-card-outline-color-focus-dark: var(--cbp-color-black);
  --cbp-card-danger-outline-color-focus: var(--cbp-color-white);
  --cbp-card-danger-outline-color-focus-dark: var(--cbp-color-black);
  --cbp-card-color-background-selected: var(--cbp-color-interactive-selected-dark);
  --cbp-card-color-background-selected-dark: var(--cbp-color-interactive-selected-light);
  --cbp-card-color-border-selected: var(--cbp-color-interactive-secondary-light);
  --cbp-card-color-border-selected-dark: var(--cbp-color-interactive-secondary-base);
  --cbp-card-color-title-selected: var(--cbp-color-text-lighter);
  --cbp-card-color-title-selected-dark: var(--cbp-color-text-darker);
  --cbp-card-color-text-selected: var(--cbp-color-text-lighter);
  --cbp-card-color-text-selected-dark: var(--cbp-color-text-darker);
}

/* 
 * Dark Mode - display dark design based on mode or context.
 * This toggle should have the highest specificity, so that what ever values were specified 
 * for the dark version get written to the light within the scope of this component.
 */
[data-cbp-theme=light] cbp-card[context*=dark]:not([context=light-always]),
[data-cbp-theme=dark][theme=dark] cbp-card:not([context=dark-inverts]):not([context=light-always]) {
  --cbp-card-color-background: var(--cbp-card-color-background-dark);
  --cbp-card-color-border: var(--cbp-card-color-border-dark);
  --cbp-card-color-title: var(--cbp-card-color-title-dark);
  --cbp-card-color-text: var(--cbp-card-color-text-dark);
  --cbp-banner-card-color: var(--cbp-banner-card-color-dark);
  --cbp-banner-card-color-title: var(--cbp-banner-card-color-title-dark);
  --cbp-banner-card-color-body-background: var(--cbp-banner-card-color-body-background-dark);
  --cbp-banner-card-color-border: var(--cbp-banner-card-color-border-dark);
  --cbp-flag-card-color: var(--cbp-flag-card-color-dark);
  --cbp-flag-card-color-background: var(--cbp-flag-card-color-background-dark);
  --cbp-card-outline-color-focus: var(--cbp-card-outline-color-focus-dark);
  --cbp-card-danger-outline-color-focus: var(--cbp-card-danger-outline-color-focus-dark);
  --cbp-card-color-background-selected: var(--cbp-card-color-background-selected-dark);
  --cbp-card-color-border-selected: var(--cbp-card-color-border-selected-dark);
  --cbp-card-color-title-selected: var(--cbp-card-color-title-selected-dark);
  --cbp-card-color-text-selected: var(--cbp-card-color-text-selected-dark);
}

cbp-card {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  background-color: var(--cbp-card-color-background);
  border-radius: var(--cbp-border-radius-softer);
  border-color: var(--cbp-card-color-border);
  border-style: solid;
  border-width: var(--cbp-border-size-md);
  color: var(--cbp-card-color-text);
}
cbp-card .cbp-card-body {
  padding: var(--cbp-space-4x);
  width: 100%;
  max-width: 100%;
  flex-grow: 1;
  overflow: auto;
}
cbp-card .cbp-card-body :last-child {
  margin-bottom: 0;
}
cbp-card[stretch] {
  height: 100%;
}
cbp-card [slot=cbp-card-title] {
  display: block;
  color: var(--cbp-card-color-title);
  font-weight: var(--cbp-font-weight-medium);
  font-size: var(--cbp-font-size-heading-lg);
  line-height: var(--cbp-line-height-sm);
}
cbp-card [slot=cbp-card-title] > * {
  display: flex;
  gap: var(--cbp-space-2x);
  color: var(--cbp-card-color-text);
}
cbp-card[variant=decision] [slot=cbp-card-title] {
  margin-bottom: var(--cbp-space-2x);
}
cbp-card[color=info] {
  --cbp-card-color-background: var(--cbp-color-info-lighter);
  --cbp-card-color-border: var(--cbp-color-info-light);
  --cbp-card-color-title: var(--cbp-color-text-darker);
  --cbp-card-color-text: var(--cbp-color-text-darkest);
  --cbp-card-color-background-dark: var(--cbp-color-info-darker);
  --cbp-card-color-border-dark: var(--cbp-color-info-dark);
  --cbp-card-color-title-dark: var(--cbp-color-text-lighter);
  --cbp-card-color-text-dark: var(--cbp-color-text-lightest);
}
cbp-card[color=success] {
  --cbp-card-color-background: var(--cbp-color-success-lighter);
  --cbp-card-color-border: var(--cbp-color-success-light);
  --cbp-card-color-title: var(--cbp-color-text-darker);
  --cbp-card-color-text: var(--cbp-color-text-darkest);
  --cbp-card-color-background-dark: var(--cbp-color-success-darker);
  --cbp-card-color-border-dark: var(--cbp-color-success-dark);
  --cbp-card-color-title-dark: var(--cbp-color-text-lighter);
  --cbp-card-color-text-dark: var(--cbp-color-text-lightest);
}
cbp-card[color=warning] {
  --cbp-card-color-background: var(--cbp-color-warning-lighter);
  --cbp-card-color-border: var(--cbp-color-warning-base);
  --cbp-card-color-text: var(--cbp-color-text-darkest);
  --cbp-card-color-background-dark: var(--cbp-color-warning-base);
  --cbp-card-color-border-dark: var(--cbp-color-warning-light);
  --cbp-card-color-title-dark: var(--cbp-color-text-darker);
  --cbp-card-color-text-dark: var(--cbp-color-text-darkest);
}
cbp-card[color=danger] {
  --cbp-card-color-background: var(--cbp-color-danger-lighter);
  --cbp-card-color-border: var(--cbp-color-danger-base);
  --cbp-card-color-text: var(--cbp-color-text-darkest);
  --cbp-card-color-background-dark: var(--cbp-color-danger-darker);
  --cbp-card-color-border-dark: var(--cbp-color-danger-base);
}
cbp-card[variant=decision] {
  border: 0;
}
cbp-card[variant=decision] .cbp-card-body {
  border-width: var(--cbp-border-size-md);
  border-style: solid;
  border-color: var(--cbp-banner-card-color-border);
  border-top-left-radius: var(--cbp-border-radius-softer);
  border-top-right-radius: var(--cbp-border-radius-softer);
  border-bottom: 0;
}
cbp-card [slot=cbp-card-actions] {
  display: flex;
}
cbp-card [slot=cbp-card-actions] cbp-button {
  --cbp-button-border-radius: 0;
  --cbp-button-min-height: var(--cbp-space-11x);
  width: 100%;
}
cbp-card [slot=cbp-card-actions] cbp-button[fill=ghost][color] {
  --cbp-button-border-width: var(--cbp-border-size-md) 0 var(--cbp-border-size-md) 0;
}
cbp-card [slot=cbp-card-actions] cbp-button[fill=ghost][color] button:not(:hover):not(:focus) {
  --cbp-button-color-border: var(--cbp-banner-card-color-border);
}
cbp-card [slot=cbp-card-actions] cbp-button:first-child {
  --cbp-button-border-radius: 0 0 0 var(--cbp-border-radius-softer);
}
cbp-card [slot=cbp-card-actions] cbp-button:first-child[fill=ghost][color] {
  --cbp-button-border-width: var(--cbp-border-size-md) 0 var(--cbp-border-size-md) var(--cbp-border-size-md);
}
cbp-card [slot=cbp-card-actions] cbp-button:last-child {
  --cbp-button-border-radius: 0 0 var(--cbp-border-radius-softer) 0;
}
cbp-card [slot=cbp-card-actions] cbp-button:last-child[fill=ghost][color] {
  --cbp-button-border-width: var(--cbp-border-size-md) var(--cbp-border-size-md) var(--cbp-border-size-md) 0;
}
cbp-card [slot=cbp-card-actions] cbp-button:first-child:last-child {
  --cbp-button-border-radius: 0 0 var(--cbp-border-radius-softer) var(--cbp-border-radius-softer);
}
cbp-card [slot=cbp-card-actions] cbp-button:first-child:last-child[fill=ghost][color] {
  --cbp-button-border-width: var(--cbp-border-size-md);
}
cbp-card [slot=cbp-card-actions] cbp-button button, cbp-card [slot=cbp-card-actions] cbp-button a {
  padding-block: var(--cbp-space-2x);
  width: 100%;
}
cbp-card[color=danger] .cbp-card-body {
  border-color: var(--cbp-color-danger-base);
}
cbp-card[variant=banner] {
  border-color: var(--cbp-banner-card-color);
}
cbp-card[variant=banner] [slot=cbp-card-title] > * {
  background-color: var(--cbp-banner-card-color);
  color: var(--cbp-banner-card-color-title);
  font-size: var(--cbp-font-size-heading-md);
  font-weight: var(--cbp-font-weight-medium);
  padding: var(--cbp-space-3x) var(--cbp-space-4x);
}
cbp-card[variant=banner] .cbp-card-body {
  background-color: var(--cbp-banner-card-color-body-background);
}
cbp-card[variant=banner][color=info] {
  --cbp-banner-card-color: var(--cbp-color-info-dark);
  --cbp-banner-card-color-body-background: var(--cbp-color-info-lighter);
  --cbp-banner-card-color-dark: var(--cbp-color-info-light);
  --cbp-banner-card-color-body-background-dark: var( --cbp-color-info-darker);
}
cbp-card[variant=banner][color=success] {
  --cbp-banner-card-color: var(--cbp-color-success-dark);
  --cbp-banner-card-color-body-background: var(--cbp-color-success-lighter);
  --cbp-banner-card-color-dark: var(--cbp-color-success-light);
  --cbp-banner-card-color-body-background-dark: var(--cbp-color-success-darker);
}
cbp-card[variant=banner][color=warning] {
  --cbp-banner-card-color: var(--cbp-color-warning-base);
  --cbp-banner-card-color-body-background: var(--cbp-color-warning-lighter);
  --cbp-banner-card-color-title: var(--cbp-color-text-darker);
  --cbp-banner-card-color-dark: var(--cbp-color-warning-lighter);
  --cbp-banner-card-color-body-background-dark: var(--cbp-color-warning-base);
  --cbp-banner-card-color-title-dark: var(--cbp-color-text-darker);
}
cbp-card[variant=banner][color=danger] {
  --cbp-banner-card-color: var(--cbp-color-danger-dark);
  --cbp-banner-card-color-body-background: var(--cbp-color-danger-lighter);
  --cbp-banner-card-color-title: var(--cbp-color-text-lighter);
  --cbp-banner-card-color-dark: var(--cbp-color-danger-light);
  --cbp-banner-card-color-body-background-dark: var(--cbp-color-danger-darker);
}
cbp-card[variant=flag] {
  flex-direction: row;
}
cbp-card[variant=flag] .cbp-card-flag {
  min-width: var(--cbp-flag-card-min-width);
  align-content: center;
  text-align: center;
  color: var(--cbp-flag-card-color);
  background-color: var(--cbp-flag-card-color-background);
}
cbp-card[variant=flag] .cbp-card-clickable {
  display: flex;
}
cbp-card[variant=flag][color=info] {
  --cbp-flag-card-color-dark: (--cbp-color-text-lighter);
  --cbp-flag-card-color-background: var(--cbp-color-info-base);
  --cbp-flag-card-color-background-dark: var(--cbp-color-info-dark);
}
cbp-card[variant=flag][color=success] {
  --cbp-flag-card-color-dark: (--cbp-color-text-lighter);
  --cbp-flag-card-color-background: var(--cbp-color-success-base);
  --cbp-flag-card-color-background-dark: var(--cbp-color-success-dark);
}
cbp-card[variant=flag][color=warning] {
  --cbp-flag-card-color-background: var(--cbp-color-warning-dark);
  --cbp-flag-card-color-background-dark: var(--cbp-color-warning-light);
}
cbp-card[variant=flag][color=danger] {
  --cbp-flag-card-color-background: var(--cbp-color-danger-base);
  --cbp-flag-card-color-background-dark: var(--cbp-color-danger-light);
}
cbp-card .cbp-card-clickable {
  text-decoration-line: none;
}
cbp-card[interactive=clickable], cbp-card[interactive=selectable], cbp-card[interactive=radio] {
  --cbp-checkbox-min-height: var(--cbp-space-6x);
  --cbp-checkbox-color-border: var(--cbp-color-interactive-secondary-light);
  --cbp-checkbox-color-border-dark: var(--cbp-color-interactive-secondary-light);
  --cbp-checkbox-color-halo-hover:transparent;
  --cbp-checkbox-color-halo-hover-dark:transparent;
  --cbp-checkbox-color-halo-focus:transparent;
  --cbp-checkbox-color-halo-focus-dark:transparent;
  --cbp-checkbox-color-halo-checked-hover: transparent;
  --cbp-checkbox-color-halo-checked-hover-dark: transparent;
  --cbp-checkbox-color-halo-checked-focus: transparent;
  --cbp-checkbox-color-halo-checked-focus-dark: transparent;
  --cbp-radio-color-bg: transparent;
  --cbp-radio-color-bg-dark: var(--cbp-color-gray-cool-70);
}
cbp-card[interactive=clickable] a, cbp-card[interactive=selectable] a, cbp-card[interactive=radio] a {
  color: var(--cbp-card-color-text);
  flex-grow: 1;
}
cbp-card[interactive=clickable]:hover, cbp-card[interactive=selectable]:hover, cbp-card[interactive=radio]:hover {
  --cbp-card-color-background: var(--cbp-color-gray-cool-10);
  --cbp-card-color-border: var(--cbp-color-interactive-secondary-darker);
  --cbp-card-color-title: var(--cbp-color-text-darker);
  --cbp-card-color-text: var(--cbp-color-text-darker);
  --cbp-card-color-background-dark: var(--cbp-color-gray-cool-60);
  --cbp-card-color-border-dark: var(--cbp-color-interactive-secondary-lighter);
  --cbp-card-color-title-dark: var(--cbp-color-text-lighter);
  --cbp-card-color-text-dark: var(--cbp-color-text-lighter);
  --cbp-checkbox-color-border: var(--cbp-color-interactive-secondary-darker);
  --cbp-checkbox-color-border-dark: var(--cbp-color-interactive-secondary-lighter);
  --cbp-checkbox-color-halo: transparent;
  --cbp-radio-color-halo-hover: transparent;
  --cbp-radio-color-halo-hover-dark: transparent;
  --cbp-radio-color-halo-checked-hover: transparent;
  --cbp-radio-color-halo-checked-hover-dark: transparent;
  --cbp-radio-color-border: var(--cbp-color-interactive-secondary-darker);
  --cbp-radio-color-bg: transparent;
  --cbp-radio-color-border-dark: var(--cbp-color-interactive-secondary-lighter);
  --cbp-radio-color-bg-dark: var(--cbp-color-gray-cool-70);
}
cbp-card[interactive=clickable]:focus, cbp-card[interactive=clickable]:focus-within, cbp-card[interactive=selectable]:focus, cbp-card[interactive=selectable]:focus-within, cbp-card[interactive=radio]:focus, cbp-card[interactive=radio]:focus-within {
  --cbp-card-color-background: var(--cbp-color-interactive-focus-dark);
  --cbp-card-color-border: var(--cbp-color-interactive-secondary-lighter);
  --cbp-card-color-title: var(--cbp-color-text-lighter);
  --cbp-card-color-text: var(--cbp-color-text-lighter);
  --cbp-card-color-background-dark: var(--cbp-color-interactive-focus-light);
  --cbp-card-color-border-dark: var(--cbp-color-interactive-secondary-darker);
  --cbp-card-color-title-dark: var(--cbp-color-text-darker);
  --cbp-card-color-text-dark: var(--cbp-color-text-darker);
  --cbp-checkbox-color-border: var(--cbp-color-interactive-focus-light);
  --cbp-checkbox-color-border-dark: var(--cbp-color-interactive-focus-dark);
  --cbp-checkbox-color-bg: var(--cbp-color-gray-cool-70);
  --cbp-checkbox-color-bg-dark: var(--cbp-color-white);
  --cbp-checkbox-color-halo: transparent;
  --cbp-radio-color-bg: var(--cbp-color-gray-cool-70);
  --cbp-radio-color-halo-focus: transparent;
  --cbp-radio-color-halo-focus-dark: transparent;
  --cbp-radio-color-halo-checked-focus: transparent;
  --cbp-radio-color-halo-checked-focus-dark: transparent;
  --cbp-radio-color-checked-focus: var(--cbp-color-interactive-focus-light);
  --cbp-radio-color-checked-focus-dark: var(--cbp-color-interactive-selected-dark);
  --cbp-radio-color-border-checked-focus: var(--cbp-color-interactive-focus-light);
  --cbp-radio-color-border-checked-focus-dark: var(--cbp-color-interactive-selected-dark);
}
cbp-card[interactive=clickable]:focus:not(disabled) .cbp-card-body, cbp-card[interactive=clickable]:focus-within:not(disabled) .cbp-card-body, cbp-card[interactive=selectable]:focus:not(disabled) .cbp-card-body, cbp-card[interactive=selectable]:focus-within:not(disabled) .cbp-card-body, cbp-card[interactive=radio]:focus:not(disabled) .cbp-card-body, cbp-card[interactive=radio]:focus-within:not(disabled) .cbp-card-body {
  outline: var(--cbp-border-size-md) solid var(--cbp-card-outline-color-focus);
  outline-offset: calc(var(--cbp-space-1x) * -1);
  border-radius: var(--cbp-border-radius-softer);
}
cbp-card[interactive=clickable]:active, cbp-card[interactive=selectable]:active, cbp-card[interactive=radio]:active {
  --cbp-card-color-background: var(--cbp-color-interactive-active-dark);
  --cbp-card-color-border: var(--cbp-color-interactive-secondary-light);
  --cbp-card-color-title: var(--cbp-color-text-lighter);
  --cbp-card-color-text: var(--cbp-color-text-lighter);
  --cbp-card-color-background-dark: var(--cbp-color-interactive-active-light);
  --cbp-card-color-border-dark: var(--cbp-color-interactive-secondary-base);
  --cbp-card-color-title-dark: var(--cbp-color-text-darker);
  --cbp-card-color-text-dark: var(--cbp-color-text-darker);
  --cbp-radio-color-border: var(--cbp-color-interactive-focus-light);
  --cbp-radio-color-border-dark: var(--cbp-color-interactive-selected-dark);
}
cbp-card[interactive=clickable]:has([slot=cbp-card-title] input[type=checkbox]:checked), cbp-card[interactive=clickable]:has([slot=cbp-card-title] input[type=radio]:checked), cbp-card[interactive=selectable]:has([slot=cbp-card-title] input[type=checkbox]:checked), cbp-card[interactive=selectable]:has([slot=cbp-card-title] input[type=radio]:checked), cbp-card[interactive=radio]:has([slot=cbp-card-title] input[type=checkbox]:checked), cbp-card[interactive=radio]:has([slot=cbp-card-title] input[type=radio]:checked) {
  --cbp-card-color-background: var(--cbp-card-color-background-selected);
  --cbp-card-color-border: var(--cbp-card-color-border-selected);
  --cbp-card-color-title: var(--cbp-card-color-title-selected);
  --cbp-card-color-text: var(--cbp-card-color-text-selected);
  --cbp-checkbox-color: var(--cbp-color-text-darker);
  --cbp-checkbox-color-dark: var(--cbp-color-text-lighter);
  --cbp-checkbox-color-border-checked: var(--cbp-color-interactive-focus-light);
  --cbp-checkbox-color-border-checked-dark: var(--cbp-color-interactive-selected-dark);
  --cbp-checkbox-color-bg-checked: var(--cbp-color-interactive-focus-light);
  --cbp-checkbox-color-bg-checked-dark: var(--cbp-color-interactive-selected-dark);
  --cbp-checkbox-color-bg-checked-focus: var(--cbp-color-interactive-focus-light);
  --cbp-checkbox-color-bg-checked-focus-dark: var(--cbp-color-interactive-selected-dark);
  --cbp-checkbox-color-halo: transparent;
  --cbp-radio-color-bg: var(--cbp-color-gray-cool-70);
  --cbp-radio-color-bg-dark: var(--cbp-color-white);
  --cbp-radio-color-border-checked: var(--cbp-color-interactive-focus-light);
  --cbp-radio-color-checked: var(--cbp-color-interactive-focus-light);
  --cbp-radio-color-border-checked-dark: var(--cbp-color-interactive-selected-dark);
  --cbp-radio-color-checked-dark: var(--cbp-color-interactive-selected-dark);
}
cbp-card[interactive=clickable][color=danger]:hover, cbp-card[interactive=selectable][color=danger]:hover, cbp-card[interactive=radio][color=danger]:hover {
  --cbp-card-color-background: var(--cbp-color-danger-light);
  --cbp-card-color-border: var(--cbp-color-danger-base);
  --cbp-card-color-title: var(--cbp-color-text-darkest);
  --cbp-card-color-text: var(--cbp-color-text-darkest);
  --cbp-card-color-background-dark: var(--cbp-color-danger-base);
  --cbp-card-color-border-dark: var(--cbp-color-danger-light);
  --cbp-card-color-title-dark: var(--cbp-color-text-lighter);
  --cbp-card-color-text-dark: var(--cbp-color-text-lighter);
}
cbp-card[interactive=clickable][color=danger]:focus, cbp-card[interactive=clickable][color=danger]:focus-within, cbp-card[interactive=selectable][color=danger]:focus, cbp-card[interactive=selectable][color=danger]:focus-within, cbp-card[interactive=radio][color=danger]:focus, cbp-card[interactive=radio][color=danger]:focus-within {
  --cbp-card-color-background: var(--cbp-color-interactive-focus-dark);
  --cbp-card-color-border: var(--cbp-color-danger-light);
  --cbp-card-color-title: var(--cbp-color-text-lightest);
  --cbp-card-color-text: var(--cbp-color-text-lightest);
  --cbp-card-color-background-dark: var(--cbp-color-interactive-focus-light);
  --cbp-card-color-border-dark: var(--cbp-color-danger-base);
  --cbp-card-color-title-dark: var(--cbp-color-text-darker);
  --cbp-card-color-text-dark: var(--cbp-color-text-darker);
}
cbp-card[interactive=clickable][color=danger]:focus:not([disabled]) .cbp-card-body, cbp-card[interactive=clickable][color=danger]:focus-within:not([disabled]) .cbp-card-body, cbp-card[interactive=selectable][color=danger]:focus:not([disabled]) .cbp-card-body, cbp-card[interactive=selectable][color=danger]:focus-within:not([disabled]) .cbp-card-body, cbp-card[interactive=radio][color=danger]:focus:not([disabled]) .cbp-card-body, cbp-card[interactive=radio][color=danger]:focus-within:not([disabled]) .cbp-card-body {
  outline: 2px solid var(--cbp-card-danger-outline-color-focus);
  outline-offset: -4px;
}
cbp-card[interactive=clickable][disabled], cbp-card[interactive=selectable][disabled], cbp-card[interactive=radio][disabled] {
  --cbp-card-color-background: var(--cbp-color-interactive-disabled-light);
  --cbp-card-color-border: var(--cbp-color-interactive-disabled-dark);
  --cbp-card-color-title: var(--cbp-color-interactive-disabled-dark);
  --cbp-card-color-text: var(--cbp-color-interactive-disabled-dark);
  --cbp-card-color-background-dark: var(--cbp-color-interactive-disabled-dark);
  --cbp-card-color-border-dark: var(--cbp-color-interactive-disabled-light);
  --cbp-card-color-title-dark: var(--cbp-color-interactive-disabled-light);
  --cbp-card-color-text-dark: var(--cbp-color-interactive-disabled-light);
}
cbp-card[interactive=clickable] cbp-radio label, cbp-card[interactive=selectable] cbp-radio label, cbp-card[interactive=radio] cbp-radio label {
  display: grid;
  grid-template-columns: 1fr var(--cbp-space-7x);
}