/* Shared component primitives used by the React components' inline markup.
   Kept minimal: the Material 3 "state layer" (hover/press/focus overlay) and focus ring.
   State layers paint currentColor over the component, so the correct "on" color is inherited automatically. */
.md-state-layer{position:absolute;inset:0;background:currentColor;opacity:0;transition:opacity 90ms linear;pointer-events:none;border-radius:inherit}
.md-interactive{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}
.md-interactive:hover>.md-state-layer{opacity:0.08}
.md-interactive:focus-visible>.md-state-layer{opacity:0.10}
.md-interactive:active>.md-state-layer{opacity:0.10}
.md-interactive:disabled,.md-interactive[aria-disabled="true"]{cursor:default}
.md-interactive:disabled>.md-state-layer,.md-interactive[aria-disabled="true"]>.md-state-layer{display:none}
.md-interactive:focus-visible{outline:3px solid var(--md-sys-color-secondary);outline-offset:2px}