Choice card

/* smbk-choice-card — Choice card. Figma "Choice card" 7105:1911 (State: Default, Hover, Pressed, Focus, Disabled, Error × Selected).
 * One choice drawn as a card: the radio's circle or the checkbox's box, then a
 * label in Label MD over an optional line in Body SM, the whole card the
 * label of one native radio or checkbox. Built on the radio and the checkbox:
 * the card carries their block and size classes, so the mark's own looks
 * (hover, chosen, error, disabled) are theirs, and this stylesheet adds only
 * the card: its surface, its edge, its padding and the focus ring around it.
 * The label over its line, and the mark on the label's first line, are the
 * rules every choice shares, in choice/choice.css.
 * Chosen, the edge turns the brand color at the emphasis width, drawn inside
 * so the card keeps its size, and the mark shows the choice as a shape too. */

/* Two classes, so the card wins over the radio's and the checkbox's own row whichever stylesheet loads first. */
.smbk-choice-card:is(.smbk-radio, .smbk-checkbox) {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: var(--smbk-space-inline-md);
  width: 100%;
  padding: calc(var(--smbk-space-inset-xl) - var(--smbk-border-width-hairline));
  border: var(--smbk-border-width-hairline) solid var(--smbk-color-border-rim);
  border-radius: var(--smbk-radius-container-md);
  background: var(--smbk-color-surface-default);
  box-shadow: var(--smbk-elevation-control);
  color: var(--smbk-color-text-default);
  font-family: var(--smbk-typography-label-md-font-family);
  font-size: var(--smbk-typography-label-md-font-size);
  font-weight: var(--smbk-typography-label-md-font-weight);
  line-height: var(--smbk-typography-label-md-line-height);
  letter-spacing: var(--smbk-typography-label-md-letter-spacing);
}

@media (hover: hover) {
  .smbk-choice-card:is(.smbk-radio, .smbk-checkbox):hover:has(:enabled) {
    background: var(--smbk-color-surface-raised);
  }
}

/* Pressed: the card sinks onto the sunken surface and drops its lift. */
.smbk-choice-card:is(.smbk-radio, .smbk-checkbox):active:has(:enabled) {
  background: var(--smbk-color-surface-sunken);
  box-shadow: none;
}

/* Chosen: the brand edge at the emphasis width, the hairline border plus the rest drawn inside. */
.smbk-choice-card:is(.smbk-radio, .smbk-checkbox):has(:checked) {
  border-color: var(--smbk-color-border-brand);
  box-shadow: inset 0 0 0 calc(var(--smbk-border-width-emphasis) - var(--smbk-border-width-hairline)) var(--smbk-color-border-brand), var(--smbk-elevation-control);
}

/* Pressed while chosen keeps the brand edge, not the lift; in error the danger edge below stays. */
.smbk-choice-card:not(.smbk-choice-card--error, :has([aria-invalid="true"])):is(.smbk-radio, .smbk-checkbox):active:has(:enabled:checked) {
  box-shadow: inset 0 0 0 calc(var(--smbk-border-width-emphasis) - var(--smbk-border-width-hairline)) var(--smbk-color-border-brand);
}

/* Error, chosen or not: the danger edge at the emphasis width; its control marked aria-invalid="true" draws the same. */
.smbk-choice-card.smbk-choice-card--error:is(.smbk-radio, .smbk-checkbox):has(:enabled),
.smbk-choice-card:is(.smbk-radio, .smbk-checkbox):has(:enabled[aria-invalid="true"]) {
  border-color: var(--smbk-color-feedback-danger-border);
  box-shadow: inset 0 0 0 calc(var(--smbk-border-width-emphasis) - var(--smbk-border-width-hairline)) var(--smbk-color-feedback-danger-border), var(--smbk-elevation-control);
}

/* The focus ring goes around the whole card, not the mark. */
.smbk-choice-card:is(.smbk-radio, .smbk-checkbox):has(:focus-visible) {
  outline: var(--smbk-focus-ring-width) solid var(--smbk-color-border-focus);
  outline-offset: var(--smbk-focus-ring-offset);
}

.smbk-choice-card :is(.smbk-radio__control, .smbk-checkbox__control):focus-visible + :is(.smbk-radio__circle, .smbk-checkbox__box) {
  outline: none;
}

.smbk-choice-card .smbk-radio__control:not(:checked):focus-visible + .smbk-radio__circle {
  background: transparent;
}

/* Disabled: the disabled surface with no lift; chosen, the edge keeps its width in the disabled border color. */
.smbk-choice-card:is(.smbk-radio, .smbk-checkbox):has(:disabled) {
  background: var(--smbk-color-surface-disabled);
  box-shadow: none;
}

.smbk-choice-card:is(.smbk-radio, .smbk-checkbox):has(:disabled:checked) {
  border-color: var(--smbk-color-action-disabled-border);
  box-shadow: inset 0 0 0 calc(var(--smbk-border-width-emphasis) - var(--smbk-border-width-hairline)) var(--smbk-color-action-disabled-border);
}

/* ---- high contrast (forced colors) ---- */
/* In Windows high-contrast mode the browser drops shadows, so the chosen card's edge is the border alone:
   Highlight, as the chosen mark is. Nothing here applies outside that mode. */

@media (forced-colors: active) {
  .smbk-choice-card:is(.smbk-radio, .smbk-checkbox):has(:checked) {
    border-color: Highlight;
  }

  .smbk-choice-card:is(.smbk-radio, .smbk-checkbox):has(:disabled) {
    border-color: GrayText;
  }
}

{
  "name": "choice-card",
  "block": "smbk-choice-card",
  "summary": "One choice drawn as a card, with a label and a line under it: picked like a radio, or ticked like a checkbox.",
  "adapt": "css",
  "axes": {
    "mark": {
      "values": [
        "radio",
        "checkbox"
      ],
      "default": "radio",
      "description": "A radio when one card of a group is picked; a checkbox when several can be."
    }
  },
  "flags": {
    "error": {
      "description": "The choice is invalid, such as a required question left empty. The card takes the danger edge, and its mark its error look."
    }
  },
  "parts": [
    "text",
    "label",
    "description"
  ],
  "figmaNodeId": "7105:1911"
}