@layer components {
  .panel {
    /* Panels are large surfaces, so they take the deeper cut. */
    --chamfer: var(--panel-chamfer, var(--chamfer-large));

    --panel-pad-block: var(--panel-padding, var(--block-space-half));
    --panel-pad-inline: var(--panel-padding, var(--inline-space-double));

    background-color: var(--panel-bg, var(--color-surface));
    clip-path: var(--chamfer-clip);
    border: var(--panel-border-size, 1px) solid var(--panel-border-color, var(--color-ink-light));
    border-radius: var(--panel-border-radius, var(--radius));
    color: var(--color-ink);
    inline-size: var(--panel-size, min(60ch, 100%));
    max-inline-size: 100%;
    padding: var(--panel-pad-block) var(--panel-pad-inline);

    @media (min-width: 640px) {
      --panel-size: 100%;
    }
  }

  .panel--wide {
    --panel-size: 60ch;
  }

  .panel:has(> .panel__header) {
    padding: 0;
  }

  .panel__header,
  .panel__body {
    padding: var(--panel-pad-block) var(--panel-pad-inline);
  }

  .panel__header {
    --panel-pad-block: var(--block-space);

    background-color: var(--color-canvas);
    border-block-end: 1px solid var(--color-ink-light);
  }

  /* Draws attention to guidance that sits above the page's main content. */
  .panel--highlight {
    --panel-bg: color-mix(in oklch, var(--color-primary) 12%, var(--color-surface));
    --panel-border-color: var(--color-primary);
  }

  .panel--centered {
    --panel-border-size: 0;
    --panel-size: 100%;

    @media (min-width: 640px) {
      --panel-size: 42ch;
    }

    #main:has(&) {
      display: grid;
      justify-content: center;
      margin: auto;
    }
  }
}