/* Button Group Component */

/* Segmented control / radio button group inspired by React Rainbow's RadioButtonGroup.
   A compact, pill-shaped group of options where one is selected at a time.
   Used for view mode switching and similar toggle controls. */

@layer components {
  /* ============================================
     CONTAINER
     ============================================ */
  .button-group {
    display: inline-flex;
    align-items: center;
    background-color: var(--color-gray-1);
    border-radius: var(--radius-pill);
    padding: 2px;
    gap: 2px;
  }

  /* ============================================
     INDIVIDUAL OPTION
     ============================================ */
  .button-group__option {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--space-md);
    height: var(--button-height-sm);
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-gray-4);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition:
      background-color var(--transition-fast),
      color var(--transition-fast),
      box-shadow var(--transition-fast);
  }

  .button-group__option:hover {
    color: var(--color-dark);
  }

  .button-group__option:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: -2px;
    border-radius: var(--radius-pill);
  }

  /* Active / selected option */
  .button-group__option--active {
    background-color: var(--color-bg-main);
    color: var(--color-dark);
    box-shadow: var(--shadow-sm);
  }

  .button-group__option--active:hover {
    color: var(--color-dark);
  }

  /* ============================================
     SIZE VARIANTS
     ============================================ */
  .button-group--sm .button-group__option {
    height: calc(var(--button-height-sm) - 4px);
    font-size: var(--font-size-xs);
    padding-inline: var(--space-sm);
  }

  .button-group--md .button-group__option {
    height: var(--button-height-sm);
    font-size: var(--font-size-sm);
    padding-inline: var(--space-md);
  }

  .button-group--lg .button-group__option {
    height: var(--button-height-md);
    font-size: var(--font-size-md);
    padding-inline: var(--space-lg);
  }

  /* ============================================
     VARIANT: BRAND
     Selected option uses brand color background
     ============================================ */
  .button-group--brand .button-group__option--active {
    background-color: var(--color-brand);
    color: white;
    box-shadow: none;
  }

  .button-group--brand .button-group__option--active:hover {
    color: white;
  }

  /* ============================================
     DARK MODE
     ============================================ */
  @media (prefers-color-scheme: dark) {
    .button-group {
      background-color: var(--color-bg-highlight);
    }

    .button-group__option--active {
      background-color: var(--color-bg-secondary);
    }
  }
}