/* Shared primary action style. Page styles still control size and placement. */
:root {
  --mtg-button-background: linear-gradient(135deg, #8cbdfb, #639af0 52%, #5689e2);
  --mtg-button-ease: cubic-bezier(.22, 1, .36, 1);
}

:is(
  .primary-link,
  .primary-button,
  button.is-primary,
  .admin-primary,
  .account-form button[type="submit"],
  .account-button:not(.secondary, .danger),
  .mtg-image-url-form button,
  .scryfall-image-prototype[data-theme] .image-prototype-actions button.is-primary
) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 0;
  border-radius: 6px;
  background: var(--mtg-button-background);
  color: #fff;
  box-shadow: none;
  text-shadow: none;
  text-decoration: none;
  font: 600 13px/1.6 "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
  transform: none;
  filter: none;
  transition: opacity .2s;

  &:is(:hover, :focus-visible, :active) {
    background: var(--mtg-button-background);
    color: #fff;
    box-shadow: none;
    text-shadow: none;
    transform: none;
    filter: none;
  }

  &:focus-visible { outline: 2px solid #527cb1; outline-offset: 3px; }

  /* Negative layers keep both effects behind labels, including bare text nodes. */
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: #000;
    opacity: 0;
    transition: opacity .25s var(--mtg-button-ease);
  }
  &:not(:disabled, [aria-disabled="true"]):hover::before { opacity: .07; }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    left: var(--button-ripple-x, 50%);
    top: var(--button-ripple-y, 50%);
    width: var(--button-ripple-size, 300px);
    height: var(--button-ripple-size, 300px);
    border-radius: 50%;
    background: rgb(255 255 255 / 32%);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }
  &.is-mtg-rippling::after { animation: mtg-button-ripple 480ms ease-out; }

  /* Board controls already add a ripple node; the shared effect replaces it here. */
  & > .control-ripple { display: none; }
  & > :is(.icon, .button-icon) { display: none; }

  &:is(:disabled, [aria-disabled="true"]) { opacity: .5; cursor: default; }

  @media (prefers-reduced-motion: reduce) {
    &, &::before { transition: none; }
    &.is-mtg-rippling::after { animation: none; }
  }
}

@keyframes mtg-button-ripple {
  from { opacity: 1; transform: translate(-50%, -50%) scale(0); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}