/* State layers. Every interactive M3 component in the file wraps its content in a
   "state-layer" child that tints on hover/focus/press. Opacities are M3 standard;
   disabled content is 38% opacity over a 12% container tint. */
:root {
  --state-hover-opacity: 0.08; /* @kind other */
  --state-focus-opacity: 0.12; /* @kind other */
  --state-press-opacity: 0.12; /* @kind other */
  --state-drag-opacity: 0.16; /* @kind other */
  --state-disabled-content-opacity: 0.38; /* @kind other */
  --state-disabled-container-opacity: 0.12; /* @kind other */
  --state-disabled-container: rgba(29,27,32,0.12);
  --state-disabled-content: rgba(23,29,30,0.38);
}

/* Utility: put on a positioned element to get the M3 tint overlay behaviour. */
.m3-state-layer{position:absolute;inset:0;pointer-events:none;background:currentColor;opacity:0;transition:opacity var(--duration-short) var(--ease-standard)}
.m3-interactive:hover > .m3-state-layer{opacity:var(--state-hover-opacity)}
.m3-interactive:focus-visible > .m3-state-layer{opacity:var(--state-focus-opacity)}
.m3-interactive:active > .m3-state-layer{opacity:var(--state-press-opacity)}