@layer components {
  /* Base
  /* -------------------------------------------------------------------------- */

  /* The shared surface behind rows, dashboard tiles, tables and blank slates */
  .card {
    background-color: var(--card-background, var(--color-surface));
    border: var(--card-border-size, 1px) solid var(--card-border-color, var(--color-border));
    border-radius: var(--card-border-radius, var(--border-radius-large));
    box-shadow: var(--card-shadow, var(--shadow-small));
    color: var(--color-ink);
    display: flex;
    flex-direction: column;
    gap: var(--card-gap, var(--block-space-half));
    padding: var(--card-padding, var(--block-space-double));
    position: relative;
    transition: background-color var(--duration) ease-in-out,
      border-color var(--duration) ease-in-out,
      box-shadow var(--duration) ease-in-out;
  }

  /* Variants
  /* -------------------------------------------------------------------------- */

  /* Lifts on hover to signal the whole card is clickable */
  .card--raisable {
    @media (any-hover: hover) {
      &:hover {
        --card-border-color: var(--color-border-strong);
        --card-shadow: var(--shadow-large);
      }
    }
  }

  /* No inner padding: the child (a table, a list) owns its own spacing */
  .card--flush {
    --card-padding: 0;
    --card-gap: 0;

    overflow: hidden;
  }

  .card--centered {
    align-items: center;
    text-align: center;
  }
}