@layer components {
  .btn {
    --icon-size: var(--btn-icon-size, 1.3em);
    --btn-border-radius: 99rem;
    --btn-hover-brightness: 0.9;

    align-items: center;
    align-self: center;
    background-color: var(--btn-background, var(--color-canvas));
    border-radius: var(--btn-border-radius);
    border: var(--btn-border-size, 1px) solid var(--btn-border-color, var(--color-ink-light));
    color: var(--btn-color, var(--color-ink));
    cursor: pointer;
    display: inline-flex;
    font-size: 1em;
    font-weight: var(--btn-font-weight, 600);
    gap: var(--btn-gap, 0.5em);
    justify-content: center;
    padding: var(--btn-padding, 0.5em 1.1em);
    pointer-events: auto;
    position: relative;
    text-decoration: none;
    transition: 100ms ease-out;
    transition-property: background-color, border, box-shadow, color, opacity, scale;

    /* Form submit buttons align to the start (left); add .full-width to stretch.
       Overrides the align-self: center default that horizontal toolbars rely on. */
    &[type="submit"]:not(.full-width) {
      align-self: start;
    }

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

    html[data-theme="dark"] & {
      --btn-hover-brightness: 1.25;
    }

    @media (prefers-color-scheme: dark) {
      html:not([data-theme]) & {
        --btn-hover-brightness: 1.25;
      }
    }

    &[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;

        -webkit-mask: var(--mask), var(--mask), var(--mask);
        -webkit-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;
      }
    }
  }

  /* Variants */

  .btn--plain {
    --btn-background: transparent;
    --btn-border-radius: 0;
    --btn-border-size: 0;
    --btn-color: inherit;
    --btn-icon-size: 100%;
    --btn-padding: 0;
  }

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

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

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

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

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

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

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

  .btn--success {
    --success-timing-function: cubic-bezier(0.25, 1.25, 0.5, 1);
    animation: zoom-fade 500ms var(--success-timing-function);
  }

  .btn--placeholder {
    pointer-events: none;
    visibility: hidden;
  }

  /* 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-border-radius);
        cursor: pointer;
        display: flex;
        inset: 0;
        margin: 0;
        padding: 0;
        position: absolute;

        &:focus-visible {
          outline: 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);
    }

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

  /* Submenu */

  .submenu {
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space-half);
  }

  .submenu__item {
    border-radius: 99rem;
    border: 1px solid var(--color-ink-lighter);
    color: var(--color-ink);
    font-size: var(--text-small);
    font-weight: 600;
    padding: 0.35em 0.9em;
    text-decoration: none;
    transition: 100ms ease-out;
    transition-property: background-color, border-color, color;

    &[aria-current="page"] {
      background-color: var(--color-ink);
      border-color: var(--color-ink);
      color: var(--color-ink-inverted);
    }

    @media (any-hover: hover) {
      &:not([aria-current="page"]):hover {
        background-color: var(--color-ink-lightest);
      }
    }
  }

  /* Button groups */

  .btn__group {
    display: flex;

    .btn {
      --btn-border-radius: 0;
      --radius: 0.3em;

      flex: 1 0 0;
      justify-content: center;
      white-space: nowrap;
    }

    :first-child .btn {
      border-end-start-radius: var(--radius);
      border-inline-end: 0;
      border-start-start-radius: var(--radius);
    }

    :last-child .btn {
      border-end-end-radius: var(--radius);
      border-inline-start: 0;
      border-start-end-radius: var(--radius);
    }
  }
}