@layer components{.banner{padding:.75rem;border-radius:.75rem;font-size:.875rem;line-height:1.25rem;display:flex;align-items:flex-start;gap:.5rem}.banner__icon{inline-size:1.25rem;flex-shrink:0}.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)}}