@layer components {

  /* ── Container ───────────────────────────────────────────────────── */

  .btn-group {
    display: inline-flex;
    border: 1px solid var(--color-border-default);
    overflow: hidden;
  }

  /* ── Item ─────────────────────────────────────────────────────────── */

  .btn-group-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1) var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-primary);
    background-color: transparent;
    border: none;
    border-left: 1px solid var(--color-border-default);
    cursor: pointer;
    transition: background-color var(--duration-normal) ease-out;
  }

  .btn-group-item:first-child {
    border-left: none;
  }

  /* ── Hover ────────────────────────────────────────────────────────── */

  .btn-group-item:hover {
    background-color: var(--color-surface-secondary);
  }

  /* ── Active (pressed) ────────────────────────────────────────────── */

  .btn-group-item:active {
    background-color: var(--color-surface-tertiary);
    transition: none;
  }

  /* ── Focus-visible ───────────────────────────────────────────────── */

  .btn-group-item:focus-visible {
    outline: 2px solid var(--color-accent-base);
    outline-offset: -2px;
  }

  /* ── Selected ────────────────────────────────────────────────────── */

  .btn-group-item.is-active {
    background-color: var(--color-accent-base);
    color: var(--color-surface-primary);
  }

  .btn-group-item.is-active:hover {
    background-color: var(--color-accent-hover);
  }

  .btn-group-item.is-active:active {
    filter: brightness(0.9);
    transition: none;
  }

  /* ── Disabled ────────────────────────────────────────────────────── */

  .btn-group-item:disabled {
    opacity: 0.4;
    pointer-events: none;
  }

  /* ── Loose variant ─────────────────────────────────────────────── */

  .btn-group-loose {
    flex-wrap: wrap;
    gap: var(--space-2);
    border: none;
    overflow: visible;
  }

  .btn-group-loose .btn-group-item {
    background-color: var(--color-surface-tertiary);
    color: var(--color-text-secondary);
    border-left: none;
  }

  .btn-group-loose .btn-group-item:hover {
    background-color: var(--color-surface-secondary);
  }

  /* ── Small size ────────────────────────────────────────────────── */

  .btn-group-sm .btn-group-item {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
  }

  /* ── Count badge ───────────────────────────────────────────────── */

  .btn-group-count {
    margin-left: var(--space-2);
    font-size: var(--text-xs);
    opacity: 0.7;
  }

  .btn-group-item.is-active .btn-group-count {
    opacity: 0.85;
  }
}