@layer components{[data-surface-level]{--surface-level-highlight:inset 0 1px 0 var(--color-surface-highlight);--surface-level-drop:0 0 0 0 transparent;background-color:var(--surface-level-bg);border:var(--stroke-width-default) 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-border:var(--color-surface-border-1);--surface-level-edge:var(--color-surface-border-2);--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-border:var(--color-surface-border-2);--surface-level-edge:var(--color-surface-border-3)}[data-surface-level="3"]{--surface-level-bg:var(--color-surface-level-3);--surface-border:var(--color-surface-border-3);--surface-level-edge:var(--color-surface-border-4)}[data-surface-level="4"]{--surface-level-bg:var(--color-surface-level-4);--surface-border:var(--color-surface-border-4);--surface-level-edge:var(--color-surface-border-5)}[data-surface-level="5"]{--surface-level-bg:var(--color-surface-level-5);--surface-border:var(--color-surface-border-5);--surface-level-edge:var(--color-surface-border-6)}[data-surface-level="6"]{--surface-level-bg:var(--color-surface-level-6);--surface-border:var(--color-surface-border-6);--surface-level-edge:var(--color-surface-border-7)}[data-surface-level="7"]{--surface-level-bg:var(--color-surface-level-7);--surface-border:var(--color-surface-border-7);--surface-level-edge:var(--color-surface-border-8)}[data-surface-level="8"]{--surface-level-bg:var(--color-surface-level-8);--surface-border:var(--color-surface-border-8);--surface-level-edge:var(--color-surface-border-8)}[data-shadow-level="1"]{--surface-level-drop:var(--shadow-level-1)}[data-shadow-level="2"]{--surface-level-drop:var(--shadow-level-2)}[data-shadow-level="3"]{--surface-level-drop:var(--shadow-level-3)}[data-shadow-level="4"]{--surface-level-drop:var(--shadow-level-4)}[data-shadow-level="5"]{--surface-level-drop:var(--shadow-level-5)}[data-shadow-level="6"]{--surface-level-drop:var(--shadow-level-6)}[data-shadow-level="7"]{--surface-level-drop:var(--shadow-level-7)}[data-shadow-level="8"]{--surface-level-drop:var(--shadow-level-8)}@media (hover:hover){[data-surface-level="1"]:is(a[href],button,[data-hoverable]):hover{--surface-level-edge:var(--color-surface-border-3)}[data-surface-level="2"]:is(a[href],button,[data-hoverable]):hover{--surface-level-edge:var(--color-surface-border-4)}[data-surface-level="3"]:is(a[href],button,[data-hoverable]):hover{--surface-level-edge:var(--color-surface-border-5)}[data-surface-level="4"]:is(a[href],button,[data-hoverable]):hover{--surface-level-edge:var(--color-surface-border-6)}[data-surface-level="5"]:is(a[href],button,[data-hoverable]):hover{--surface-level-edge:var(--color-surface-border-7)}[data-surface-level="6"]:is(a[href],button,[data-hoverable]):hover,[data-surface-level="7"]:is(a[href],button,[data-hoverable]):hover,[data-surface-level="8"]:is(a[href],button,[data-hoverable]):hover{--surface-level-edge:var(--color-surface-border-8)}}[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)}}}