@layer components {
  .btn {
    --transition: 300ms ease;

    align-items: center;
    background-color: var(--btn-background, transparent);
    border-radius: var(--btn-border-radius, 2em);
    border: var(--btn-border-size, 1px) solid var(--btn-border-color, var(--color-ink-light));
    color: var(--btn-color, var(--color-text));
    cursor: pointer;
    display: inline-flex;
    font-size: 1em;
    font-weight: 600;
    gap: var(--btn-gap, 0.5em);
    justify-content: center;
    padding: var(--btn-padding, 0.5em 1.1em);
    pointer-events: auto;
    transition:
      background-color var( --transition),
      border var( --transition),
      color var( --transition),
      filter var( --transition),
      opacity var( --transition);

    .icon {
      block-size: var(--btn-icon-size, 1.3em);
      inline-size: var(--btn-icon-size, 1.3em);
      max-inline-size: unset;
      user-select: none;
    }

    &:where(:has(.icon)) {
      text-align: start;
    }

    /* Circle buttons */
    &.btn--circle,
    &:where(:has(.for-screen-reader):has(.icon)) {
      --btn-border-radius: 50%;
      --btn-padding: 0;

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

      .icon {
        block-size: 66%;
        inline-size: 66%;
      }
    }

    /* With radios and checkboxes */
    &:has(input[type=radio], input[type=checkbox]) {
      :is(input[type=radio], input[type=checkbox]) {
        appearance: none;
        block-size: calc(var(--btn-size) - var(--outline-size));
        border-radius: var(--btn-border-radius);
        cursor: pointer;
        display: flex;
        inline-size: calc(var(--btn-size) - var(--outline-size));
        margin: 0;
        padding: 0;
      }

      img.checked {
        display: none;
      }
    }

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

      img {
        filter: invert(1);
      }

      @media (prefers-color-scheme: dark) {
        img {
          filter: invert(0);
        }
      }

      img.checked {
        display: block;
      }
    }

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

    @media print {
      display: none;
    }
  }

  summary {
    list-style: none;
    cursor: pointer;

    &::marker,
    &::-webkit-details-marker { display: none; }
  }

  details[open] {
    > summary .hide-when-open { display: none; }
  }

  /* Variants */
  .btn--icon {
    --btn-border-radius: 0.5em;
    --btn-border-size: 0;
    flex-direction: column;

    .icon {
      block-size: var(--btn-icon-size, 3.2em);
      inline-size: var(--btn-icon-size, 3.2em);
      max-inline-size: unset;
    }
  }

  .btn--icon-left {
    flex-direction: row;
    justify-content: flex-start;
    text-align: start;
    line-height: 1.2;

    .icon {
      block-size: var(--btn-icon-size, 1.2em);
      inline-size: var(--btn-icon-size, 1.2em);
    }
  }

  .btn--icon-full {
    --btn-icon-size: 100%;
  }

  .btn--borderless {
    --btn-border-size: 0;
  }

  .btn--link {
    --btn-background: var(--color-link);
    --btn-color: var(--color-ink-inverted);
    --outline-color: var(--color-link);
  }

  .btn--negative {
    --btn-background: var(--color-negative);
    --btn-color: var(--color-ink-inverted);
    --outline-color: var(--color-negative);
  }

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

  .btn--subtle {
    opacity: 0;

    &:hover { opacity: 1; }
  }

  .btn--dimmed {
    opacity: 0.5;

    &:hover { opacity: 1; }
  }

  .btn--actions-menu {
    --hover-size: 0;
    --hover-color: var(--color-ink-lightest);
    --transition: 150ms;
    --btn-padding: 0.7em 0.5em;
    --btn-icon-size: 1.1em;

    inline-size: 100%;
    white-space: nowrap;

    &:hover {
      background-color: var(--hover-color);
    }
  }

  .btn--plain {
    --btn-border-radius: 0.5em;
    --btn-border-size: 0;
    --btn-icon-size: 100%;
    --btn-padding: 0;
    --hover-size: 0;
  }

  .btn--positive {
    --btn-background: var(--color-positive);
    --btn-color: var(--color-ink-inverted);
    --outline-color: var(--color-positive);
  }

  .btn--reversed {
    --btn-background: var(--color-theme);
    --btn-color: var(--color-ink-inverted);
    --outline-color: var(--color-ink);
  }

  .btn--reversed-black {
    --btn-background: var(--color-ink);
    --btn-color: var(--color-body);
    --outline-color: var(--color-ink);
  }

  .btn--shade {
    --btn-background: oklch(var(--lch-ink) / 0.05);
  }

  .btn--small {
    font-size: 0.8em;
  }

  .btn--thick {
    --btn-border-size: 2px;
  }

  .btn--skinny {
    --btn-padding: 0.2em 0.8em;
  }

  .btn--success {
    animation: success 1s ease-out;

    img {
      animation: zoom-fade 300ms ease-out;
    }
  }

  .btn--squared {
    --btn-border-radius: var(--input-border-radius, 0.3em);
  }

  :is(.btn--link, .btn--negative, .btn--positive, .btn--reversed) {
    --btn-border-color: var(--color-body);

    img:not([class]) {
      filter: invert(1);

      @media (prefers-color-scheme: dark) {
        filter: invert(0);
      }
    }
  }
}