@layer components{[data-surface-level]{--surface-level-edge:var(--color-surface-edge);--surface-level-ring:inset 0 1px 0 var(--color-surface-highlight), 0 0 0 1px var(--surface-level-edge);background-color:var(--surface-level-bg);box-shadow:var(--surface-level-ring), var(--surface-level-drop);border:1px solid #0000}[data-surface-level="1"]{--surface-level-bg:var(--color-surface-level-1);--surface-level-ring:0 0 0 0 transparent;--surface-level-drop:0 0 0 0 transparent}[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:box-shadow var(--brand-duration-150) var(--brand-easing-standard)}}}