m3-svelte/package/misc/recommended-styles.css

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

:root {
  --m3-util-refocus: refocus-outward 0.6s cubic-bezier(0.14, 5.63, 0.4, 0.5) forwards;
}
:focus-visible:not(.focus-inset, .focus-none) {
  animation: var(--m3-util-refocus);
  outline: none;
}
:focus-visible:is(.focus-inset):not(.focus-none) {
  animation: refocus-inward 0.6s cubic-bezier(0.14, 5.63, 0.4, 0.5) forwards;
  outline: none;
}
:focus-visible.focus-none {
  outline: none;
}
@keyframes refocus-outward {
  0% {
    box-shadow: 0 0 0 0px rgb(var(--m3-scheme-secondary));
  }
  100% {
    box-shadow: 0 0 0 3px rgb(var(--m3-scheme-secondary));
  }
}
@keyframes refocus-inward {
  0% {
    box-shadow: inset 0 0 0 0px rgb(var(--m3-scheme-secondary));
  }
  100% {
    box-shadow: inset 0 0 0 3px rgb(var(--m3-scheme-secondary));
  }
}

::placeholder {
  color: rgb(var(--m3-scheme-on-background) / 0.5);
  opacity: 1;
}
::selection {
  background-color: rgb(var(--m3-scheme-tertiary-container));
  color: rgb(var(--m3-scheme-on-tertiary-container));
}