/* Configurable button shadows and hover states. */
.template-button {
  box-shadow: none;
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

.template-button[data-shadow="soft"] {
  box-shadow: 0 2px 6px rgb(0 0 0 / 14%);
}

.template-button[data-shadow="raised"] {
  box-shadow: 0 6px 14px rgb(0 0 0 / 22%);
}

.template-button[data-hover="darken"]:is(:hover, :focus-visible) {
  filter: brightness(.92);
}

.template-button[data-hover="lift"]:is(:hover, :focus-visible) {
  transform: translateY(-3px);
}

.template-button[data-hover="grow"]:is(:hover, :focus-visible) {
  transform: scale(1.02);
}

.template-button:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .template-button {
    transition: none;
  }

  .template-button:is(:hover, :focus-visible) {
    transform: none;
  }
}