/* Layer: feature-specific
   Scope: compact language and theme controls for the shared Reegl OS header.
   Used by: atoms/starter/welcome.html, atoms/account/account.html and atoms/shell/header.html.
   The host owns language/theme state; these styles only render it. */

.rx-header-preferences {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: var(--usp2xs);
}

.rx-header-preferences .rx-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}

.rx-header-preferences .rx-header-icon svg,
.rx-header-language-option > svg {
  inline-size: var(--uspm);
  block-size: var(--uspm);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rx-header-icon:disabled { cursor: wait; }

.rx-header-icon:hover,
.rx-header-language[open] > .rx-header-icon {
  background: var(--surface-2);
  color: var(--text);
}

.rx-header-preferences .rx-header-icon:focus-visible,
.rx-header-language-option:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.rx-header-language {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
}

.rx-header-language > summary { list-style: none; }
.rx-header-language > summary::before { content: none; }
.rx-header-language > summary::-webkit-details-marker { display: none; }

.rx-header-language-menu {
  position: absolute;
  inset-block-start: calc(100% + var(--uspxs));
  inset-inline-end: 0;
  z-index: 1;
  inline-size: 13rem;
  max-inline-size: calc(100vw - var(--uspm) * 2);
  margin: 0;
  padding: var(--usp2xs);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}

.rx-header-language-option {
  display: flex;
  align-items: center;
  gap: var(--uspxs);
  inline-size: 100%;
  min-block-size: 44px;
  padding: var(--uspxs);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font-size: var(--ust-1);
  text-align: start;
}

.rx-header-language-option:hover,
.rx-header-language-option:has(input:checked) {
  background: var(--surface-2);
}

.rx-header-language-option { position: relative; cursor: pointer; }
.rx-header-language-option > input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: 0;
  clip-path: inset(50%);
  overflow: hidden;
}
.rx-header-language-option > span { flex: 1; }
.rx-header-language-option:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: -2px; }
.rx-header-language-option:has(input:checked)::after { content: "✓"; color: var(--text); }
.rx-header-language-option > svg { inline-size: var(--usps); block-size: var(--usps); }

[data-r-paint~="theme-dark"] {
  --rx-theme-sun-display: none;
  --rx-theme-moon-display: inline;
}

[data-r-paint~="theme-light"] {
  --rx-theme-sun-display: inline;
  --rx-theme-moon-display: none;
}

.rx-theme-sun { display: var(--rx-theme-sun-display, inline); }
.rx-theme-moon { display: var(--rx-theme-moon-display, inline); }