/*
  Callouts: an inline message box tinted by intent. Colour modifiers set the
  --callout-* slots; a leading .callout__icon indents the body beside it.
*/

@layer components {
  .callout {
    --callout-bg: var(--color-gray-50);
    --callout-color: var(--color-gray-700);
    --callout-border: var(--color-gray-200);
    --callout-icon-color: var(--color-gray-500);

    position: relative;
    padding: 0.75rem;
    border: 1px solid var(--callout-border);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--callout-color);
    background-color: var(--callout-bg);

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

    &:has(> .callout__icon) {
      padding-left: 2.25rem;
    }
  }

  .callout--danger {
    --callout-bg: var(--color-red-50);
    --callout-color: var(--color-red-700);
    --callout-border: var(--color-red-200);
    --callout-icon-color: var(--color-red-500);
  }

  .callout--warning {
    --callout-bg: var(--color-amber-50);
    --callout-color: var(--color-amber-800);
    --callout-border: var(--color-amber-200);
    --callout-icon-color: var(--color-amber-600);
  }

  .callout--success {
    --callout-bg: var(--color-green-50);
    --callout-color: var(--color-green-800);
    --callout-border: var(--color-green-200);
    --callout-icon-color: var(--color-green-600);
  }

  .callout__icon {
    position: absolute;
    top: 0.875rem;
    left: 0.75rem;
    width: 1rem;
    height: 1rem;
    color: var(--callout-icon-color);
  }

  .callout__note {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: color-mix(in srgb, var(--callout-color) 80%, transparent);
  }

  .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;
    }
  }
}