@layer k12.components {
  [data-k12-surface] :where(.k12-button, a.k12-button, button.k12-button) {
    align-items: center;
    background: var(--k12-action-bg, var(--k12-color-navy));
    border: 1px solid var(--k12-action-border, var(--k12-color-navy));
    border-radius: var(--k12-radius-control);
    color: var(--k12-action-fg, var(--k12-color-white));
    cursor: pointer;
    display: inline-flex;
    font: 600 1rem/1.25 var(--k12-font-body);
    gap: var(--k12-space-2);
    inline-size: fit-content;
    justify-content: center;
    max-inline-size: 100%;
    min-block-size: 2.75rem;
    min-inline-size: 0;
    overflow-wrap: normal;
    padding: var(--k12-space-3) var(--k12-space-4);
    text-align: center;
    text-decoration: none;
    white-space: normal;
  }

  [data-k12-surface] :where(.k12-button, a.k12-button, button.k12-button) :where(span, strong, small, em, svg) {
    color: inherit;
  }

  [data-k12-surface] a.k12-button:link,
  [data-k12-surface] a.k12-button:visited {
    color: var(--k12-action-fg, var(--k12-color-white));
  }

  [data-k12-surface] :where(.k12-button, a.k12-button, button.k12-button):hover,
  [data-k12-surface] :where(.k12-button, a.k12-button, button.k12-button):active {
    background: var(--k12-action-hover-bg, var(--k12-color-navy-dark));
    border-color: var(--k12-action-hover-border, var(--k12-color-navy-dark));
    color: var(--k12-action-hover-fg, var(--k12-color-white));
  }

  [data-k12-surface] a.k12-button:hover,
  [data-k12-surface] a.k12-button:active {
    color: var(--k12-action-hover-fg, var(--k12-color-white));
  }

  [data-k12-surface] :where(.k12-button, a.k12-button, button.k12-button):focus-visible {
    outline: 3px solid var(--k12-focus-ring);
    outline-offset: 3px;
  }

  [data-k12-surface] :where(.k12-button, button.k12-button):disabled,
  [data-k12-surface] .k12-button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.68;
  }

  [data-k12-surface] .k12-button--secondary {
    --k12-action-bg: var(--k12-color-white);
    --k12-action-border: var(--k12-color-navy);
    --k12-action-fg: var(--k12-color-navy);
    --k12-action-hover-bg: var(--k12-color-navy-tint);
    --k12-action-hover-border: var(--k12-color-navy);
    --k12-action-hover-fg: var(--k12-color-navy-dark);
  }

  [data-k12-surface] .k12-card {
    background: var(--k12-color-surface);
    border: 1px solid var(--k12-color-border);
    border-radius: var(--k12-radius-surface);
    color: var(--k12-color-ink);
    max-inline-size: 100%;
    min-inline-size: 0;
    padding: var(--k12-space-6);
  }

  [data-k12-surface] :where(.k12-status, .k12-badge) {
    border: 1px solid currentColor;
    border-radius: 999px;
    display: inline-flex;
    font: 600 0.875rem/1.35 var(--k12-font-body);
    max-inline-size: 100%;
    min-inline-size: 0;
    overflow-wrap: anywhere;
    padding: var(--k12-space-1) var(--k12-space-2);
    white-space: normal;
  }

  [data-k12-surface] .k12-status--success {
    background: var(--k12-color-success-tint);
    color: var(--k12-color-success-text);
  }

  [data-k12-surface] .k12-status--warning {
    background: var(--k12-color-warning-tint);
    color: var(--k12-color-warning-text);
  }

  [data-k12-surface] .k12-status--danger {
    background: var(--k12-color-danger-tint);
    color: var(--k12-color-danger-text);
  }

  [data-k12-surface] .k12-status--credential {
    background: var(--k12-color-credential-tint-strong);
    color: var(--k12-color-orange-deep);
  }
}