/* Override only --sp-locale-* tokens to match a consumer's light/dark theme. */
.sp-locale {
  position: relative;
  display: inline-block;
  flex: none;
  color: var(--sp-locale-text, #25332e);
  font-family: var(--sp-locale-font, inherit);
  font-size: var(--sp-locale-font-size, 14px);
  line-height: var(--sp-locale-line-height, 1.4);
  vertical-align: middle;
}

.sp-locale__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-inline-size: 84px;
  min-block-size: 44px;
  padding: 9px 12px;
  border: 1px solid var(--sp-locale-border, #d5ddd8);
  border-radius: var(--sp-locale-trigger-radius, 999px);
  background: var(--sp-locale-surface, #fff);
  color: inherit;
  font: inherit;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.sp-locale__trigger::-webkit-details-marker {
  display: none;
}

.sp-locale__trigger::marker {
  content: '';
}

.sp-locale__globe,
.sp-locale__chevron,
.sp-locale__check {
  display: block;
  flex: none;
}

.sp-locale__globe,
.sp-locale__chevron {
  color: var(--sp-locale-muted, #617169);
}

.sp-locale__short {
  overflow: hidden;
  max-inline-size: 4ch;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sp-locale__chevron {
  transition: transform 120ms ease-out;
}

.sp-locale[open] > .sp-locale__trigger .sp-locale__chevron {
  transform: rotate(180deg);
}

/* No-JS fallback is viewport-centered, not right:0 (which can overflow a left trigger). */
.sp-locale__panel {
  position: fixed;
  z-index: var(--sp-locale-z-index, 1000);
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  inline-size: var(--sp-locale-panel-width, 208px);
  max-inline-size: calc(100vw - 24px);
  max-block-size: min(380px, 65vh);
  max-block-size: min(380px, 65dvh);
  overflow: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--sp-locale-border, #d5ddd8);
  border-radius: var(--sp-locale-panel-radius, 14px);
  background: var(--sp-locale-surface, #fff);
  color: var(--sp-locale-text, #25332e);
  box-shadow: var(--sp-locale-shadow, 0 8px 24px rgb(15 23 19 / 12%));
  list-style: none;
  text-align: start;
  transform: translate(-50%, -50%);
  scrollbar-width: thin;
}

.sp-locale:not([open]) > .sp-locale__panel {
  display: none;
}

.sp-locale[data-sp-locale-enhanced] > .sp-locale__panel {
  inset: auto;
  top: var(--sp-locale-panel-top, 0px);
  left: var(--sp-locale-panel-left, 0px);
  max-inline-size: var(--sp-locale-panel-max-width, calc(100vw - 24px));
  max-block-size: var(--sp-locale-panel-max-height, 380px);
  transform: none;
}

.sp-locale__item {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-locale__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  min-block-size: 44px;
  padding: 10px;
  border-radius: 8px;
  color: inherit;
  font: inherit;
  text-decoration: none;
}

.sp-locale__label {
  min-inline-size: 0;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

.sp-locale__link[aria-current='page'] {
  background: var(--sp-locale-selected-bg, #eaf2ed);
  color: var(--sp-locale-selected-text, #214f39);
  font-weight: 600;
}

.sp-locale__check {
  grid-column: 2;
}

@media (hover: hover) {
  .sp-locale__trigger:hover,
  .sp-locale__link:not([aria-current='page']):hover {
    background: var(--sp-locale-hover-bg, #f3f6f4);
  }
}

.sp-locale__trigger:focus-visible,
.sp-locale__link:focus-visible {
  outline: 2px solid var(--sp-locale-focus, #2563eb);
  outline-offset: 2px;
}

.sp-locale__link:focus-visible {
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .sp-locale__chevron {
    transition: none;
  }
}