/* .btn is the secondary (outlined) button. Variants set the local properties: three for the face
   at rest, three for the face on hover. With a fine pointer the face flips between them, after
   AdHoc's menu (docs/design/references.md); on touch the button presses instead. */
@layer components {
  .btn, :where(button, input[type=submit]) {
    --btn-background: var(--color-bg-raised);
    --btn-color: var(--color-link);
    --btn-border: var(--color-link);
    --btn-hover-background: var(--color-link);
    --btn-hover-color: var(--color-text-reversed);
    --btn-hover-border: var(--color-link);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--inline-space);
    min-block-size: var(--touch-target);
    padding: var(--block-space-half) var(--inline-space-double);
    font-size: var(--text-small);
    font-weight: 700;
    color: var(--btn-color);
    text-decoration: none;
    background: var(--btn-background);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius);
    transition:
      background-color var(--transition), color var(--transition), border-color var(--transition),
      scale var(--duration-press) var(--ease-press);

    &:where(:hover, :focus-visible):not(:disabled, [aria-disabled=true], [aria-busy=true]) {
      --btn-background: var(--btn-hover-background);
      --btn-color: var(--btn-hover-color);
      --btn-border: var(--btn-hover-border);
    }

    /* AdHoc's press: a little narrower than it is short. Feedback, so the counter keeps it. */
    &:active:not(:disabled, [aria-disabled=true], [aria-busy=true]) { scale: 0.955 0.925; }

    /* Turbo disables the submitter while its form is busy; that button keeps its face and spins. */
    &:disabled:not(form[aria-busy=true] *), &[aria-disabled=true] {
      --btn-background: var(--color-border);
      --btn-color: var(--color-subtle);
      --btn-border: var(--color-border);
    }
  }

  /* The face: background and edge live on ::before, so the flip turns the face while the button's
     own box, the one a click lands on, stays put. A submit input has no ::before and keeps its own. */
  :is(.btn, button):not(input) {
    position: relative;
    isolation: isolate;
    background: none;
    border-color: transparent;

    &::before {
      content: "";
      position: absolute;
      inset: -1px;
      z-index: -1;
      background: var(--btn-background);
      border: 1px solid var(--btn-border);
      border-radius: inherit;
      transition: background-color var(--transition), border-color var(--transition);
    }
  }

  .btn--reversed {
    --btn-background: var(--color-link);
    --btn-color: var(--color-text-reversed);
    --btn-border: var(--color-link);
    --btn-hover-background: var(--color-bg-raised);
    --btn-hover-color: var(--color-link);
  }

  .btn--negative {
    --btn-background: var(--color-negative);
    --btn-color: var(--color-text-reversed);
    --btn-border: var(--color-negative);
    --btn-hover-background: var(--color-bg-raised);
    --btn-hover-color: var(--color-negative);
    --btn-hover-border: var(--color-negative);
  }

  .btn--plain {
    --btn-background: transparent;
    --btn-border: transparent;
    --btn-hover-background: var(--color-link-tint);
    --btn-hover-color: var(--color-text); /* text on a tint is always ink */
    --btn-hover-border: transparent;
  }

  /* Size lg (48 px): the counter's one-handed actions (design-system.md, Button). */
  .btn--large {
    min-block-size: 3rem;
    font-size: var(--text-normal);
  }

  /* Loading: the button waits, and says so to assistive technology. */
  .btn[aria-busy=true], form[aria-busy=true] .btn:disabled { cursor: progress; }
  .btn[aria-busy=true] { opacity: 0.7; }

  /* The flip: the face turns edge-on and back, and swaps while it is edge-on; the label changes
     colour at the same moment. Decoration, so never at the counter (design-system.md, Motion). */
  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    :is(.btn, button):not(input):where(:hover, :focus-visible):not(:disabled, [aria-disabled=true], [aria-busy=true], .counter *) {
      transition-delay: calc(var(--duration-flip) / 2), 0s;
      transition-duration: 0s, var(--duration-press);
      transition-property: color, scale;

      &::before {
        animation: btn-flip var(--duration-flip) var(--ease-out-back);
        transition-delay: calc(var(--duration-flip) / 2);
        transition-duration: 0s;
      }
    }
  }

  /* F15 · Google's own "Agregar a Google Wallet" artwork, shown as Google draws it: no face and no
     flip of ours, at natural size so it never drops under Google's 48px minimum, and with their
     8px clear space. Narrow screens get Google's condensed version instead of a shrunk one. */
  button.google-wallet {
    min-block-size: auto;
    margin: 0.5rem;
    padding: 0;
    border: 0;
    border-radius: 2rem; /* the focus ring follows the pill */

    &::before { content: none; }
    img { max-inline-size: none; }
  }

  @keyframes btn-flip {
    50% { transform: perspective(20em) rotateX(85deg) scale(0.9); }
  }
}