@property --metal-angle {
  syntax: "<angle>";
  initial-value: 125deg;
  inherits: false;
}

.metal-button {
  --metal-low: #737c82;
  --metal-mid: #b7bec2;
  --metal-high: #dce1e3;
  --metal-warm: #adb5b8;
  --metal-face:
    repeating-linear-gradient(0deg, #ffffff06 0 1px, #00000006 1px 2px),
    linear-gradient(115deg, #a6aeb2, #c2c8cb 30%, #b0b8bc 58%, #c6cdcf 85%, #a6aeb2);
  --metal-ink: #222a2e;
  position: relative;
  isolation: isolate;
  border: 0;
  color: var(--metal-ink);
  background: var(--metal-face);
  background-size: 180% 100%;
  background-position: 45% 50%;
  box-shadow:
    0 2px 4px #0003,
    0 5px 12px #0002,
    inset 0 1px 0 #fff5,
    inset 0 -1px 1px #0003;
  text-shadow: 0 1px 0 #ffffff50;
  transition:
    background-position 900ms cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 250ms,
    transform 180ms;
  -webkit-tap-highlight-color: transparent;
}

.metal-button::before,
.metal-button::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}

.metal-button::before {
  inset: 0;
  padding: 2px;
  background: conic-gradient(
    from var(--metal-angle),
    var(--metal-low),
    var(--metal-mid) 9%,
    var(--metal-high) 14%,
    var(--metal-low) 18%,
    var(--metal-mid) 28%,
    var(--metal-high) 33%,
    var(--metal-warm) 35%,
    var(--metal-low) 39%,
    var(--metal-mid) 48%,
    var(--metal-high) 55%,
    var(--metal-low) 59%,
    var(--metal-mid) 72%,
    var(--metal-high) 79%,
    var(--metal-low) 84%,
    var(--metal-high) 91%,
    var(--metal-low)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: metal-reflection 16s linear infinite;
}

.metal-button::after {
  inset: 3px;
  border: 1px solid #ffffff20;
  box-shadow: none;
}

.metal-button:enabled:where(:not([aria-disabled="true"])):hover,
a.metal-button:where(:not([aria-disabled="true"])):hover,
.metal-button-trigger:hover .metal-button {
  background-position: 95% 50%;
  box-shadow:
    0 3px 5px #0004,
    0 8px 20px #0003,
    inset 0 1px 0 #fffa,
    inset 0 -2px 2px #0004;
  transform: translateY(-1px);
}

.metal-button:enabled:where(:not([aria-disabled="true"])):active,
a.metal-button:where(:not([aria-disabled="true"])):active,
.metal-button-trigger:active .metal-button {
  transform: translateY(1px) scale(0.99);
  box-shadow:
    0 1px 2px #0003,
    inset 0 2px 5px #0004;
  transition-duration: 90ms;
}

.metal-button:focus-visible {
  outline: 2px solid var(--color-accent, #d8fb78);
  outline-offset: 4px;
}

.metal-button:disabled::before,
.metal-button[aria-disabled="true"]::before,
[data-motion="paused"] .metal-button::before {
  animation-play-state: paused;
}

.metal-button__badge {
  color: inherit;
  background: #0000000d;
  border: 1px solid currentColor;
  text-shadow: none;
}

@keyframes metal-reflection {
  to {
    --metal-angle: 485deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .metal-button,
  .metal-button::before {
    animation: none;
    transition: none;
  }
  .metal-button:enabled:hover,
  .metal-button:enabled:active,
  a.metal-button:hover,
  a.metal-button:active,
  .metal-button-trigger:hover .metal-button,
  .metal-button-trigger:active .metal-button {
    transform: none;
  }
}