/* The LANGUAGE element: the locale and currency picker. */

/* The language picker speaks the NAV register: the four nav dials, read here as every chrome
 * affordance in that voice reads them from its own sheet. */
.sk-language {
  font-size: var(--sk-text-nav-size);
  font-weight: var(--kit-weight-nav);
  letter-spacing: calc(var(--kit-track-nav) * 1em);
  text-transform: var(--kit-caps-nav);
}

.sk-language {
  display: inline-flex;
  align-items: center;
  gap: var(--kit-space-1);
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  color: var(--sk-ink-muted);
}
/* --sk-dur-paint-live inherits from the bar, so this follows it inside one. */
.sk-language {
  transition: color var(--sk-dur-paint-live, 0s) var(--sk-ease-paint, ease);
}
.sk-language:hover {
  color: var(--sk-ink);
}
/* :not() on the caret: .sk-language > svg is (0,1,1) and would outrank a later rule. */
.sk-language > svg:not(.sk-language-caret) {
  width: var(--sk-text-nav-size);
  height: var(--sk-text-nav-size);
}
.sk-language-caret {
  width: calc(var(--sk-text-nav-size) * 0.7);
  height: calc(var(--sk-text-nav-size) * 0.42);
}
/* The two canned label forms — "EN" (short) / "English" (long); the row's
 * `displayType` picks one via the data-display stamp. Deliberately dumb:
 * real locale data plumbs in later. */
.sk-language[data-display="short"] .sk-language-long,
.sk-language[data-display="long"] .sk-language-short {
  display: none;
}

.sk-language-caret {
  opacity: 0.6;
}