/* Shared by the Angular site and generated legal/support pages. */
.language-picker {
  position: relative;
  display: block;
  width: 204px;
  max-width: 100%;
  flex: 0 0 auto;
  color: var(--ink, #09234f);
}

.language-picker-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.language-picker-control {
  position: relative;
  display: block;
  border-radius: 999px;
}

.language-picker select {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 9px 32px 9px 38px;
  border: 1px solid #09234f1c;
  border-radius: inherit;
  background: #ffffffb3;
  color: inherit;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
  box-shadow: 0 2px 5px #09234f04;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.language-picker-globe,
.language-picker-chevron {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--ocean, #2e51d9);
}

.language-picker-globe {
  left: 12px;
  width: 18px;
  height: 18px;
}

.language-picker-chevron {
  right: 12px;
  width: 12px;
  height: 12px;
}

@media (pointer: coarse), (max-width: 560px) {
  .language-picker { width: 216px; }
  .language-picker select {
    min-height: 44px;
    padding-block: 11px;
    font-size: 16px;
  }
}

@media (hover: hover) {
  .language-picker select:hover {
    background: #fff;
    border-color: #2e51d96b;
    box-shadow: 0 3px 10px #09234f08;
  }
}

.language-picker select:focus-visible {
  outline: 3px solid var(--ocean, #2e51d9);
  outline-offset: 4px;
  background: #fff;
}

.language-picker select option { background: #fffaf2; color: #09234f; }

@media (prefers-reduced-motion: reduce) {
  .language-picker select { transition: none; }
}

@media (forced-colors: active) {
  .language-picker select { border-color: ButtonText; }
  .language-picker-globe, .language-picker-chevron { color: ButtonText; }
}
