@layer components{.banner{border-radius:.75rem;align-items:flex-start;gap:.5rem;padding:.75rem;font-size:.875rem;line-height:1.25rem;display:flex}.banner__icon{flex-shrink:0;inline-size:1.25rem}.banner--info{background-color:var(--color-bg-surface-info);color:var(--color-text-info)}.banner--success{background-color:var(--color-bg-surface-success);color:var(--color-text-success)}.banner--warning{background-color:var(--color-bg-surface-warning);color:var(--color-text-warning)}.banner--caution{background-color:var(--color-bg-surface-caution);color:var(--color-text-caution)}.banner--critical{background-color:var(--color-bg-surface-critical);color:var(--color-text-critical)}.banner--emphasis{background-color:var(--color-bg-surface-emphasis);color:var(--color-text-emphasis)}.banner--magic{background-color:var(--color-bg-surface-magic);color:var(--color-text-magic)}}