@layer components {
  .btn {
    --icon-size: var(--btn-icon-size, 1em);

    display: var(--btn-display, block);
    padding: var(--btn-padding, 0.9em 1.2em);
    gap: var(--btn-gap, 1.25ch);
    background-color: var(--btn-background, var(--color-ink-weaker));
    border: var(--btn-border, none);
    border-radius: var(--btn-radius, var(--radius));
    box-shadow: var(--btn-shadow, var(--shadow-lit));
    color: var(--btn-color, var(--color-ink));
    text-box: var(--btn-text-box, var(--text-box-font-header));
    font-size: var(--btn-font-size, inherit);
    font-family: var(--btn-font, var(--font-button));
    font-weight: var(--btn-font-weight, inherit);
    align-items: center;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    pointer-events: auto;
    text-decoration: none;
    transition: 100ms ease-out;
    transition-property: background-color, border, box-shadow, color, opacity, scale;

    @media (any-hover: hover) {
      &:hover {
        filter: brightness(var(--btn-hover-brightness, 1.25));
      }
    }

    &:has(> i) {
      display: var(--btn-display, flex);
    }

    &[disabled],
    &:has([disabled]),
    [disabled] &[type="submit"],
    &[type="submit"]:disabled {
      cursor: not-allowed;
      opacity: 0.3;
      pointer-events: none;
    }

    form[aria-busy] &:disabled {
      position: relative;

      > * {
        visibility: hidden;
      }

      &::after {
        --mask: no-repeat radial-gradient(#000 68%,#0000 71%);
        --size: 1.25em;

        mask: var(--mask), var(--mask), var(--mask);
        mask-size: 28% 45%;
        animation: submitting 1s infinite linear;
        aspect-ratio: 8/5;
        background: currentcolor;
        content: "";
        inline-size: var(--size);
        inset: 50%;
        margin-block: calc((var(--size) / 3) * -1);
        margin-inline: calc((var(--size) / 2) * -1);
        position: absolute;
      }
    }
  }

  .btn .icon:last-child:not(:only-child) {
    margin-inline-start: auto;
  }

  /* Variants
  /* ------------------------------------------------------------------------ */

  .btn--plain {
    --btn-background: transparent;
    --btn-radius: 0;
    --btn-border-size: 0;
    --btn-color: inherit;
    --btn-font: var(--font-sans);
    --btn-icon-size: 100%;
    --btn-padding: 0;
    --btn-text-box: auto;
  }

  .btn--tight {
    --btn-padding: 0.75em 1em;
  }

  .btn--mini {
    --btn-radius: var(--child-radius);
    --btn-font: var(--font-sans);
    --btn-gap: 1ch;
    --btn-padding: 0.25em 0.5em;
    --btn-shadow: none;
    --btn-text-box: auto;
  }

  .btn--bordered {
    --btn-background: transparent;
    --btn-border: var(--btn-border-size, 1px) solid var(--btn-border-color, var(--color-ink-weaker));
  }

  .btn--link {
    --btn-background: var(--color-link);
    --btn-border-color: var(--color-canvas);
    --focus-ring-color: var(--color-link);
  }

  .btn--circle,
  .btn[aria-label]:where(:has(.icon)),
  .btn:where(:has(.for-screen-reader):has(.icon)) {
    --btn-padding: 0;
    --btn-icon-size: 75%;

    aspect-ratio: 1;
    block-size: var(--btn-size);
    display: grid;
    inline-size: var(--btn-size);
    justify-content: normal; /* FF fix */
    place-items: center;

    > * {
      grid-area: 1/1;
    }
  }

  /* Make a normal button circular on mobile */
  @media (width <= 639px) {
    .btn--circle-mobile {
      --btn-size: 3em;
      --btn-padding: 0;
      --btn-icon-size: 75%;

      aspect-ratio: 1;
      inline-size: var(--btn-size);

      kbd,
      span:last-of-type:not(.icon) {
        display: none;
      }
    }
  }

  @media (width >= 640px) {
    .btn .icon--mobile-only {
      display: none !important;
    }
  }

  .btn--negative {
    --btn-background: var(--color-negative);
    --btn-border-color: var(--color-negative);
    --focus-ring-color: var(--color-negative);
  }

  .btn--positive {
    --btn-background: var(--color-positive);
    --btn-border-color: var(--color-canvas);
    --focus-ring-color: var(--color-positive);
  }

  .btn--success {
    --success-timing-function: cubic-bezier(0.25, 1.25, 0.5, 1);

    animation: success 1s var(--success-timing-function);

    .icon {
      animation: zoom-fade 500ms var(--success-timing-function);
    }
  }

  /* Fake button used to help space things out */
  .btn--placeholder {
    pointer-events: none;
    visibility: hidden;
  }

  .btn--remove {
    --btn-icon-size: 0.7em;
  }

  .btn--inverted {
    --btn-background: var(--color-ink);
    --btn-border-color: var(--color-canvas);
    --btn-color: var(--color-canvas);
    --focus-ring-color: var(--color-ink);
  }

  /* Toggleable buttons
  /* ------------------------------------------------------------------------ */

  .btn {
    &:has(input[type="radio"], input[type="checkbox"]) {
      position: relative;

      :is(input[type="radio"], input[type="checkbox"]) {
        appearance: none;
        border-radius: var(--btn-radius, var(--radius));
        cursor: pointer;
        display: flex;
        inset: 0;
        margin: 0;
        padding: 0;
        position: absolute;

        &:focus-visible {
          outline: none;
        }
      }

      .checked {
        display: none;
      }
    }

    &:has(input:checked)  {
      --btn-background: var(--color-ink);
      --btn-border-color: var(--color-ink);
      --btn-color: var(--color-ink-inverted);
      --focus-ring-color: var(--color-ink);

      .checked {
        display: block;
      }
    }

    &:has(input:focus-visible)  {
      outline: var(--focus-ring-size) solid var(--focus-ring-color);
      outline-offset: var(--focus-ring-offset);
    }
  }

  .btn--back {
    --btn-border-size: 0;

    @media (width <= 639px) {
      strong, kbd {
        display: none;
      }
    }

    @media (width >= 640px) {
      font-size: var(--text-medium);

      .icon--arrow-left {
        display: none;
      }
    }
  }


  /* Button groups
  /* ------------------------------------------------------------------------ */

  .btn__group {
    display: flex;
    gap: 1ch;
    overflow-x: auto;
  }

  /* Button utilities
  /* ------------------------------------------------------------------------ */

  :is([data-platform~="mobile"], [data-platform~="native"]) {
    .btn--ensure-tap-target-size {
      --tap-target-z-index: 1;
      --tap-target-min-size: 44px;

      z-index: var(--tap-target-z-index);

      &::before {
        content: "";
        display: block;
        block-size: var(--tap-target-min-size);
        inline-size: var(--tap-target-min-size);
        inset: calc(50% - var(--tap-target-min-size) / 2) auto auto calc(50% - var(--tap-target-min-size) / 2);
        opacity: 0;
        position: absolute;
      }
    }
  }
}