:host {
  display: block;
}

.app-locale-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border-color, #d3dad9);
}

.app-locale-tab {
  padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-secondary, #5f6e6a);
  font-weight: var(--font-weight-semibold, 600);
  font-size: var(--font-size-base, 0.875rem);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--transition-fast, 120ms ease),
    border-color var(--transition-fast, 120ms ease);

  &:hover {
    color: var(--text-primary, #1e3c38);
  }

  &:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color, #2f6e5d) 25%, transparent);
  }
}

.app-locale-tab--active {
  color: var(--primary-color, #2f6e5d);
  border-bottom-color: var(--primary-color, #2f6e5d);
}

@media (prefers-reduced-motion: reduce) {
  .app-locale-tab {
    transition: none;
  }
}
