/* Material 3 — shared interaction primitives: state layers & focus ring.
   M3 components overlay an "on-color" tint at 8% (hover) / 10% (focus,press) / 16% (drag).
   Apply .md-state-layer to a positioned, overflow-hidden host; the ::after paints currentColor. */

.md-state-layer {
  position: relative;
  overflow: hidden;
}
.md-state-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
  border-radius: inherit;
}
.md-state-layer:hover:not(:disabled):not([aria-disabled="true"])::after { opacity: var(--md-sys-state-hover-opacity); }
.md-state-layer:focus-visible::after { opacity: var(--md-sys-state-focus-opacity); }
.md-state-layer:active:not(:disabled):not([aria-disabled="true"])::after { opacity: var(--md-sys-state-pressed-opacity); }

/* Focus ring — M3 uses a 3px secondary outline offset from the component */
.md-focus-ring:focus-visible {
  outline: 3px solid var(--md-sys-color-secondary);
  outline-offset: 2px;
}

/* Disabled content/container helpers */
.md-disabled {
  pointer-events: none;
  cursor: default;
}