/*
  Callouts: an inline message on a white surface. Intent modifiers set the
  --callout-* slots that colour the badge and the text. shared/_callout puts
  the icon on a raised .callout__badge beside the .callout__body.
*/

@layer components {
  .callout {
    --callout-accent: var(--color-gray-500);
    --callout-color: var(--color-gray-700);

    padding: 0.875rem 1rem;
    border-radius: var(--radius-xl);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--callout-color);
    background-color: var(--color-surface);
    box-shadow: var(--bevel);

    & > :not(:last-child, .callout__badge) {
      margin-bottom: 0.375rem;
    }

    &:has(> .callout__badge) {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      column-gap: 0.75rem;
      padding-inline-start: 0.75rem;
    }
  }

  .callout--danger {
    --callout-accent: var(--color-red-500);
    --callout-color: var(--color-red-800);
  }

  .callout--warning {
    --callout-accent: var(--color-amber-600);
    --callout-color: var(--color-amber-800);
  }

  .callout--success {
    --callout-accent: var(--color-green-500);
    --callout-color: var(--color-green-800);
  }

  .callout--info {
    --callout-accent: var(--color-indigo-500);
    --callout-color: var(--color-indigo-800);
  }

  .callout__badge {
    --icon-size: 1rem;
    --raised-bg: var(--callout-accent);
    --raised-sheen-amount: 18%;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    margin-block: -0.25rem;
    border-radius: var(--radius-lg);
    color: var(--color-white);
    background-image: var(--raised-sheen);
    box-shadow: var(--bevel-selected);
  }

  .callout__body > :not(:last-child) {
    margin-bottom: 0.375rem;
  }

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

  .callout__note {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--color-gray-500);
  }

  .callout__details {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--color-gray-500);

    & > :not(:first-child) {
      margin-top: 0.25rem;
      white-space: pre-line;
    }
  }
}