@layer components{.notice{--_tone:var(--color-accent);--_icon:var(--color-accent-text);--flow-space:var(--space-3xs);display:flex;align-items:flex-start;gap:var(--space-xs);max-inline-size:calc(var(--measure) + 4rem);padding-block:var(--space-s);padding-inline:var(--space-s)var(--space-m);border:var(--border-width-hairline)solid var(--color-border);border-inline-start:var(--border-width-thick)solid var(--_tone);border-radius:var(--radius-s);background:var(--color-surface-raised);& .notice__icon{margin-block-start:calc((1lh - var(--icon-size))/2);color:var(--_icon)}& .notice__title{font-size:var(--size-step-1);line-height:var(--leading-tight)}&[data-tone=warning]{--_tone:var(--color-warning);--_icon:var(--color-warning);background:var(--color-warning-surface)}}}