@layer lotek {
  .lt-button {
    /* The design system cannot assume the consumer has a CSS reset. Without
       border-box, padding and border are added outside the width, and the
       element becomes wider than the box it sits in. */
    box-sizing: border-box;

    display: inline-flex;
    align-items: center;
    gap: var(--lt-spacing-2);
    padding: var(--lt-button-padding, var(--lt-spacing-2) var(--lt-spacing-4));
    font-family: inherit;
    font-size: var(--lt-font-size-m);
    /* Weight, line height and border width are shape, and shape is read from
       a component variable with the token value as the fallback. A theme
       that wants bold buttons with a thick border, as some design systems
       have, sets them without overriding a single selector. */
    font-weight: var(--lt-button-font-weight, var(--lt-font-weight-medium));
    line-height: var(--lt-button-line-height, var(--lt-line-height-default));
    border: var(--lt-button-border-width, 1px) solid var(--lt-color-accent-fill);
    border-radius: var(--lt-button-radius, var(--lt-spacing-1));
    background: var(--lt-color-accent-fill);
    color: var(--lt-color-accent-content);
    cursor: pointer;
    text-decoration: none;
    user-select: none;

    /* The text may wrap. With `white-space: nowrap` a button with a long
       label burst its box on a phone, and then the whole page scrolls
       sideways. The button must never become wider than the room it gets.

       `normal` is explicit because `white-space` is inherited: a consumer
       with `nowrap` on something around it would otherwise get the problem
       back. Checked in Chromium, `text-wrap: balance` alone is enough, since
       it sets `text-wrap-mode: wrap` and so beats the inherited value, but
       the explicit line also applies where `text-wrap` is not supported. */
    white-space: normal;
    max-inline-size: 100%;
    text-align: center;
    text-wrap: balance;
  }

  /* Hover moves away from `content`: darker in the light theme, lighter in
     the dark one. `text` is the role that sits there, and since the
     lightness belongs to the role and not the brand colour, the text on the
     button keeps its contrast whatever the hue. `content on text` is a
     promise in the contract. */
  .lt-button:hover {
    background: var(--lt-color-accent-text);
    border-color: var(--lt-color-accent-text);
  }

  .lt-button:focus-visible {
    outline: var(--lt-focus-ring);
    outline-offset: 2px;
  }

  /* Secondary: outline, transparent background */
  .lt-button[data-variant="secondary"] {
    background: transparent;
    color: var(--lt-color-accent-text);
    border-color: var(--lt-color-accent-border);
  }

  .lt-button[data-variant="secondary"]:hover:not(
    :disabled,
    [aria-disabled="true"]
  ) {
    background: var(--lt-color-accent-surface);
  }

  /* Ghost: no border, no background */
  .lt-button[data-variant="ghost"] {
    background: transparent;
    color: var(--lt-color-accent-text);
    border-color: transparent;
  }

  .lt-button[data-variant="ghost"]:hover:not(
    :disabled,
    [aria-disabled="true"]
  ) {
    background: var(--lt-color-accent-surface);
  }

  /* Danger */
  .lt-button[data-variant="danger"] {
    background: var(--lt-color-danger-surface);
    color: var(--lt-color-danger-text);
    border-color: var(--lt-color-danger-text);
  }

  .lt-button[data-variant="danger"]:hover:not(
    :disabled,
    [aria-disabled="true"]
  ) {
    background: var(--lt-color-danger-fill);
    border-color: var(--lt-color-danger-fill);
    color: var(--lt-color-danger-content);
  }

  /*
   * Disabled comes last.
   *
   * When the rule was above the variants, they won on order: a disabled
   * secondary, ghost or danger button looked like an active one. The
   * variants' hover is more specific than this wherever it stands, and a
   * disabled button is still matched by `:hover`. So each of them excludes
   * the disabled state itself.
   */
  .lt-button:disabled,
  .lt-button[aria-disabled="true"] {
    background: var(--lt-color-disabled-surface);
    color: var(--lt-color-disabled-text);
    border-color: var(--lt-color-disabled-surface);
    /* No pointer-events: none here. The browser already blocks a disabled
       field, and pointer-events would only stop the cursor from showing. The
       element is then not hit by the mouse at all. */
    cursor: not-allowed;
  }

  /* aria-disabled is only information for screen readers; the element still
     works. Here pointer-events stops the mouse, at the cost of the cursor.
     If the field should really be off, use `disabled` or `readonly`. */
  .lt-button[aria-disabled="true"] {
    pointer-events: none;
  }
}