/**
 * <LanguageToggle> — pill-shaped ET/EN segment.
 *
 * Markup:
 *   <div class="c-lang-toggle" role="group" aria-label="Language">
 *     <button type="button" class="c-lang-toggle__opt" data-lang="et" aria-pressed="true">ET</button>
 *     <button type="button" class="c-lang-toggle__opt" data-lang="en" aria-pressed="false">EN</button>
 *   </div>
 */

.c-lang-toggle {
  display: inline-flex;
  align-items: stretch;
  padding: 2px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-pill);
}

.c-lang-toggle__opt {
  margin: 0;
  padding: 0 var(--space-3);
  height: 24px;
  min-width: 32px;
  font-family: inherit;
  font-size: var(--font-size-micro);
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 120ms ease, color 120ms ease;
}

.c-lang-toggle__opt:hover {
  color: var(--text-primary);
}

.c-lang-toggle__opt:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.c-lang-toggle__opt[aria-pressed="true"] {
  background: var(--bg-primary);
  color: var(--text-primary);
}