.locale-selector {
  display: flex;
  align-items: end;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .75rem auto;
  color: var(--site-color-text);
  font: 600 .8125rem/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.locale-selector label {
  align-self: center;
}

.locale-selector select,
.locale-selector button {
  min-height: 2.5rem;
  border: 1px solid var(--site-color-border);
  border-radius: .75rem;
  font: inherit;
}

.locale-selector select {
  max-width: 11rem;
  padding-block: .5rem;
  padding-inline: .75rem 2rem;
  color: var(--site-color-text);
  background: var(--site-color-canvas);
}

.locale-selector button {
  padding: .5rem .75rem;
  color: var(--site-color-on-primary);
  background: var(--site-color-primary);
  cursor: pointer;
}

.locale-selector select:focus-visible,
.locale-selector button:focus-visible {
  outline: 3px solid rgba(var(--site-color-primary-rgb), .25);
  outline-offset: 2px;
}

.locale-selector--preference {
  flex: 1;
  justify-content: flex-start;
  margin: 0;
}

@media (max-width: 48rem) {
  .locale-selector {
    align-items: stretch;
    flex-direction: column;
  }

  .locale-selector select,
  .locale-selector button {
    max-width: none;
    width: 100%;
  }
}