@layer blocks {
  .button {
    cursor: pointer;
    display: var(--button-display);
    text-align: center;
    text-decoration: none;
    font-family: var(--button-font-family);
    font-size: var(--button-font-size);
    line-height: var(--button-line-height);
    letter-spacing: var(--button-letter-spacing);
    padding: var(--button-padding);
    border-radius: var(--button-border-radius);
    border: var(--border-width-thin) var(--border-style) var(--button-border-color);
    background-color: var(--button-background-color);
    color: var(--button-color);
    width: var(--button-width);
    position: relative;
    transition:
      background-color 0.15s,
      color 0.15s,
      border-color 0.15s;
  }

  .button:hover {
    --button-background-color: var(--button-hover-background-color);
    --button-border-color: var(--button-hover-background-color);
  }

  /* ── Sizes ──────────────────────────────────────────────────── */

  .button[data-size="small"] {
    --button-font-size: var(--font-xs);
    --button-padding: var(--space-3xs) var(--space-s);
  }

  .button[data-size="small"]:hover {
    --button-background-color: var(--brand-light);
    --button-color: var(--paper);
    --button-border-color: var(--brand-light);
  }

  .button[data-size="big"] {
    --button-font-size: var(--font-lg);
    --button-padding: var(--space-s) var(--space-m);
  }

  /* ── Variants ───────────────────────────────────────────────── */

  .button[data-variant="ghost"] {
    --button-background-color: transparent;
    --button-color: var(--brand-muted);
    --button-border-color: var(--brand-soft);
    --button-hover-background-color: transparent;
    --button-padding: var(--space-xs) 0;
    --button-border-radius: 0;

    border-top: 0;
    border-left: 0;
    border-right: 0;
  }

  .button[data-variant="ghost"]:hover {
    --button-color: var(--brand);
    --button-border-color: var(--brand);
  }

  .button[data-variant="outlined"] {
    --button-background-color: transparent;
    --button-color: var(--brand);
    --button-border-color: var(--brand-soft);
  }

  .button[data-variant="outlined"]:hover {
    --button-background-color: var(--brand);
    --button-color: var(--paper);
    --button-border-color: var(--brand);
  }

  .button[data-variant="outlined-reverted"] {
    --button-background-color: var(--brand-light);
    --button-color: var(--paper);
    --button-border-color: var(--brand-light);
  }

  .button[data-variant="outlined-reverted"]:hover {
    --button-background-color: var(--brand-mid);
    --button-border-color: var(--brand-mid);
  }

  .button[data-variant="danger"] {
    --button-background-color: var(--color-danger);
    --button-color: var(--paper);
    --button-border-color: var(--color-danger);
  }

  .button[data-variant="danger"]:hover {
    --button-background-color: var(--color-danger-hover);
    --button-border-color: var(--color-danger-hover);
  }

  .button[data-variant="icon"] {
    --button-background-color: transparent;
    --button-border-color: transparent;
    --button-color: inherit;
    --button-hover-background-color: transparent;
    --button-padding: 0;
  }

  .button[data-variant="icon"]:hover {
    --button-color: var(--brand-light);
  }

  /* ── States ─────────────────────────────────────────────────── */

  .button:disabled,
  .button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.5;
  }

  .button[data-grouped="left"] {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    margin-inline-start: calc(var(--border-width-thin) * -1);
  }
}