@property --button-label { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --button-roll { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --button-level { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --button-rim-lit { syntax: '<color>'; inherits: false; initial-value: transparent; }
@property --button-rim-rest { syntax: '<color>'; inherits: false; initial-value: transparent; }
.button {
  --button-fill: transparent; --button-ink: var(--accent-ink); --button-edge: var(--rule); --button-divider: var(--button-edge);
  --button-hover-fill: var(--accent-fill); --button-hover-ink: var(--on-accent);
  --button-edge-w: 1px; --button-pad-inline: 1.1rem; --button-pad-block: 0.9rem;
  --button-divider-inset: 0.25rem; --button-dash: 0.3rem;
  --button-arrow-at: center;
  --button-label: var(--button-ink); --button-roll-span: calc(1em + 2 * var(--button-pad-block));
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: var(--tap-min);
  padding: calc(var(--button-pad-block) - var(--button-edge-w)) calc(var(--tap-min) + var(--button-pad-inline)) calc(var(--button-pad-block) - var(--button-edge-w)) var(--button-pad-inline);
  border: var(--button-edge-w) solid var(--button-edge); border-radius: 0; text-decoration: none;
  font: var(--font-label); text-transform: var(--label-case); letter-spacing: var(--label-tracking); color: var(--button-label);
  background: var(--button-fill);
}
.button::before {
  content: '' / ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, var(--button-hover-fill) var(--button-level), transparent 0);
  mask: repeating-linear-gradient(to top, #000 0 calc(100% / var(--button-segments) - var(--button-edge-w)), transparent 0 calc(100% / var(--button-segments)));
}
.button::after {
  content: '' / ''; position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: var(--tap-min); pointer-events: none;
  background:
    linear-gradient(var(--button-divider) 0 0) left / var(--button-edge-w) 100% no-repeat,
    linear-gradient(var(--button-label) 0 0) right / calc(100% - var(--button-edge-w)) 100% no-repeat;
  mask:
    var(--button-arrow) var(--button-arrow-at) / var(--tap-min) 1em repeat-x,
    linear-gradient(
      #000 0 var(--button-dash), transparent 0 25%, #000 0 calc(25% + var(--button-edge-w)), transparent 0 50%,
      #000 0 calc(50% + var(--button-edge-w)), transparent 0 75%, #000 0 calc(75% + var(--button-edge-w)), transparent 0
    ) left center / var(--button-edge-w) calc(100% - 2 * var(--button-divider-inset)) no-repeat;
}
a.button[target='_blank'] { --button-arrow: var(--button-arrow-out); }
.button.quiet { --button-ink: var(--ink); --button-hover-fill: var(--ink); --button-hover-ink: var(--paper); }
.button.filled {
  --button-fill: var(--accent-fill); --button-ink: var(--on-accent); --button-edge: var(--accent-fill); --button-divider: var(--on-accent);
  --button-hover-fill: var(--ink); --button-hover-ink: var(--paper);
}
@media (hover: hover) {
  .button:hover {
    --button-divider: var(--button-hover-ink); --button-arrow-at: calc(50% + var(--tap-min)) center;
    --button-label: var(--button-hover-ink); border-color: var(--button-hover-fill); --surface-fill: var(--button-hover-fill);
  }
  .button:hover::before { --button-level: 100%; }
}
.button:active {
  --button-divider: var(--button-hover-ink);
  --button-label: var(--button-hover-ink); border-color: var(--button-hover-fill);
}
.button:active::before { --button-level: 100%; }
.button.sweep { overflow: clip; }
.button.sweep::before { mask: none; translate: 0 100%; }
@media (hover: hover) { .button.sweep:hover::before { translate: none; } }
.button.sweep:active::before { translate: none; }
.button:active, .button:active::before { transition: none; }
:is(.button:disabled, .button[aria-disabled='true']) {
  padding-inline-end: var(--button-pad-inline); background: var(--paper-sunk); color: var(--ink-mute); text-shadow: none; border-color: var(--paper-sunk); cursor: not-allowed;
  --surface-fill: initial;
}
:is(.button:disabled, .button[aria-disabled='true'])::before, :is(.button:disabled, .button[aria-disabled='true'])::after { content: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  .button {
    overflow: clip; color: transparent;
    text-shadow: 0 calc(-1 * var(--button-roll)) var(--button-label), 0 calc(var(--button-roll-span) - var(--button-roll)) var(--button-label);
  }
  .button:hover { --button-roll: var(--button-roll-span); }
}
@media (prefers-reduced-motion: no-preference) {
  .button { transition: --button-label var(--hover-fade), border-color var(--hover-fade), --button-roll var(--button-roll-time) var(--ease-roll); }
  .button::before { transition: --button-level var(--answer-fade) steps(var(--button-segments), jump-start); }
  @media (hover: hover) {
    .button:hover::before { transition: --button-level var(--button-rise-time) steps(var(--button-segments), jump-start); }
  }
  .button::after { transition: mask-position var(--button-roll-time) var(--ease-roll); }
  .button.sweep::before { transition: translate var(--sweep-time) var(--ease-sweep); }
  .button.sweep:active::before { transition: none; }
}

@media (hover: hover) and (pointer: fine) and (forced-colors: none) {
  .button {
    --button-rim: 2px; --button-rim-half: calc(var(--button-rim) / 2);
    --button-span: min(var(--dot-matrix-span, var(--dot-matrix-columns)), var(--dot-matrix-columns));
    --button-sweep: calc(var(--button-span) * var(--dot-matrix-step) + var(--dot-matrix-lag)); --button-rim-hold: var(--button-sweep);
    overflow: clip; color: var(--button-label);
    text-shadow:
      0 0 var(--button-rim-lit), var(--button-rim) 0 var(--button-rim-lit), calc(-1 * var(--button-rim)) 0 var(--button-rim-lit),
      0 var(--button-rim) var(--button-rim-lit), 0 calc(-1 * var(--button-rim)) var(--button-rim-lit),
      var(--button-rim-half) var(--button-rim-half) var(--button-rim-lit), calc(-1 * var(--button-rim-half)) var(--button-rim-half) var(--button-rim-lit),
      var(--button-rim-half) calc(-1 * var(--button-rim-half)) var(--button-rim-lit), calc(-1 * var(--button-rim-half)) calc(-1 * var(--button-rim-half)) var(--button-rim-lit),
      0 0 var(--button-rim-rest), var(--button-rim-half) 0 var(--button-rim-rest), calc(-1 * var(--button-rim-half)) 0 var(--button-rim-rest),
      0 var(--button-rim-half) var(--button-rim-rest), 0 calc(-1 * var(--button-rim-half)) var(--button-rim-rest);
  }
  .button.filled { --button-ground: var(--button-fill); }
  .button:is(:hover, :active) { --button-rim-lit: var(--button-hover-fill); --button-rim-rest: var(--button-ground); --button-rim-hold: 0s; }
  .button::before, .button.sweep::before {
    inset-inline-end: auto; block-size: 100%; aspect-ratio: var(--dot-matrix-columns) / var(--dot-matrix-rows); min-inline-size: 100%; translate: none;
    mask: none; background-image: var(--dot-matrix-cells); background-position: var(--dot-matrix-at); background-size: var(--dot-matrix-size); background-repeat: no-repeat;
  }
  .button:is(:hover, :active)::before { --dot-ink: var(--button-hover-fill); }
  @media (prefers-reduced-motion: no-preference) {
    .button { transition: border-color var(--hover-fade), --button-rim-rest 0s var(--button-rim-hold); }
    .button::after { transition: mask-position var(--button-roll-time) var(--ease-roll), --button-label 0s calc(var(--button-span) * var(--dot-matrix-step) + var(--dot-matrix-fade) / 2); }
    :is(.button, .button:hover, .button.sweep, .button.sweep:active)::before {
      transition-property: var(--dot-matrix-names); transition-duration: var(--dot-matrix-fade); transition-timing-function: steps(var(--dot-matrix-levels), jump-start); transition-delay: var(--dot-matrix-delays);
    }
  }
}