m3-svelte/package/etc/layer.css

M3 Svelte implements the Material 3 design system in Svelte. See the [website](https://kendell.dev/m3-svelte/) for demos and usage instructions.

:where(.m3-layer) {
  position: relative;
  -webkit-tap-highlight-color: transparent;

  /* Hitbox for rounded elements */
  &::before {
    content: "";
    position: absolute;
    inset: 0;
  }

  /* Tint */
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background-color: currentColor;
    opacity: 0;
    transition: opacity var(--m3-easing-fast);
  }
}
:disabled.m3-layer::after,
input:disabled + .layer-container.m3-layer::after,
label:has(> input:disabled).m3-layer::after {
  display: none;
}
@media (hover: hover) {
  :hover.m3-layer::after,
  :active.m3-layer::after {
    opacity: 0.08;
  }
}
:focus-visible.m3-layer::after,
input:focus-visible + .layer-container.m3-layer::after,
label:has(> input:focus-visible).m3-layer::after,
html:not(.js) :active.m3-layer::after {
  opacity: 0.12;
}