/*********************
 * Callout *
Variables:
--text-callout-header
--bg-callout-header
 *********************/

@utility callout {
  & {
    @apply border-scaffold;
    font-size: 0.85em;

    > * {
      padding: 1rem;
    }

    :where(.callout-header) {
      padding-block: 0.375rem;
      border-bottom: var(--border-width) solid
        var(--divider-color, var(--border-color));
      border-top-left-radius: inherit;
      border-top-right-radius: inherit;
      color: var(--text-callout-header, var(--text-color));
      background: var(--bg-callout-header, var(--bg-color));
    }

    :where(.callout-content) {
      border-bottom-left-radius: inherit;
      border-bottom-right-radius: inherit;
      color: var(--text-callout-content, var(--text-color));
      background: var(--bg-callout-content, var(--bg-color));
    }
  }
}