@layer components{[data-surface-level]{--surface-level-edge:var(--color-surface-edge);--surface-level-highlight:inset 0 1px 0 var(--color-surface-highlight);background-color:var(--surface-level-bg);border:1px solid var(--surface-level-edge);box-shadow:var(--surface-level-highlight), var(--surface-level-drop);background-clip:padding-box}[data-surface-level="1"]{--surface-level-bg:var(--color-surface-level-1);--surface-level-highlight:0 0 0 0 transparent;--surface-level-drop:0 0 0 0 transparent;border-color:#0000}[data-surface-level="2"]{--surface-level-bg:var(--color-surface-level-2);--surface-level-drop:var(--shadow-level-2)}[data-surface-level="3"]{--surface-level-bg:var(--color-surface-level-3);--surface-level-drop:var(--shadow-level-3)}[data-surface-level="4"]{--surface-level-bg:var(--color-surface-level-4);--surface-level-drop:var(--shadow-level-4)}[data-surface-level="5"]{--surface-level-bg:var(--color-surface-level-5);--surface-level-drop:var(--shadow-level-5)}@media (hover:hover){[data-surface-level]:is(a[href],button,[data-hoverable]):hover{--surface-level-edge:var(--color-surface-edge-hover)}}[data-ui=elevated]{border-radius:var(--radius-default);color:var(--color-on-surface)}@media (prefers-reduced-motion:no-preference){[data-surface-level]:is(a[href],button,[data-hoverable]){transition:border-color var(--brand-duration-150) var(--brand-easing-standard), box-shadow var(--brand-duration-150) var(--brand-easing-standard)}}}