@layer components {
  /* Callouts — a notice that sits in the page flow rather than over it.
   *
   * The validation summary is this box with the negative tone. There used to
   * be a separate .errors that was the same padding, the same radius, and the
   * same shape; it is gone, and shared/_errors.html.erb renders a callout.
   *
   * For a notice that interrupts, see .flash. For one that needs an answer,
   * see .dialog.
   */
  .callout {
    --callout-background: var(--color-highlight);
    --callout-color: var(--color-ink-soft);
    --callout-border-color: transparent;

    margin-block: 0 var(--space-and-half);
    padding: var(--notice-padding);
    border: var(--border-width) solid var(--callout-border-color);
    border-radius: var(--radius);
    background: var(--callout-background);
    color: var(--callout-color);

    p:first-child {
      margin-block-start: 0;
    }

    p:last-child {
      margin-block-end: 0;
    }

    ul {
      margin-block: var(--space-quarter) 0;
      padding-inline-start: var(--space);
    }
  }

  .callout__title {
    margin: 0;
    font-weight: var(--weight-semibold);
  }

  /* Tones */

  .callout--positive {
    --callout-background: var(--surface-positive);
    --callout-color: var(--color-positive-ink);
  }

  .callout--warning {
    --callout-background: var(--surface-warning);
    --callout-color: var(--color-warning-ink);
  }

  .callout--negative {
    --callout-background: var(--surface-negative);
    --callout-color: var(--color-negative);
    --callout-border-color: color-mix(in oklch, var(--color-negative) 30%, transparent);
  }
}