@layer components {
  .btn {
    align-items: center;
    background: var(--btn-background, var(--color-ink));
    border: var(--btn-border, 0);
    border-radius: 10px;
    color: var(--btn-color, var(--color-surface));
    cursor: pointer;
    display: inline-flex;
    font-size: 18px;
    font-weight: 600;
    gap: 10px;
    justify-content: center;
    line-height: 22px;
    min-block-size: 54px;
    padding: 0 26px;
    position: relative;
    text-decoration: none;
    white-space: nowrap;

    /* On the narrowest phones a long label wraps instead of spilling out of its card. */
    @media (max-width: 360px) {
      text-align: center;
      white-space: normal;
    }

    &:hover {
      background: var(--btn-hover-background, var(--color-ink-hover));
      color: var(--btn-color, var(--color-surface));
    }

    /* A file input inside the button: the label opens the picker, the input takes the focus. */
    &:has(input:focus-visible) {
      outline: var(--focus-ring-size) solid var(--focus-ring-color);
      outline-offset: var(--focus-ring-offset);
    }

    input[type=file] {
      block-size: 1px;
      clip-path: inset(50%);
      inline-size: 1px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap;
    }
  }

  .btn--small {
    font-size: 16px;
    min-block-size: 44px;
    padding: 0 18px;
  }

  .btn--outline {
    --btn-background: transparent;
    --btn-border: 1px solid var(--color-ink);
    --btn-color: var(--color-ink);
    --btn-hover-background: var(--color-surface);
  }

  .btn--light {
    --btn-background: var(--color-surface);
    --btn-color: var(--color-ink);
    --btn-hover-background: var(--color-ground);
  }
}