/* ============================================================================
 * LocaleSwitcher — CSS Module
 *
 * Trigger and dropdown follow WorkstreamSwitcher (its neighbour in the editor
 * toolbar); rows follow PageNavigator's, since both list documents to open.
 * ============================================================================ */

.root {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* ------------------------------------------------------------------
 * Trigger button — current locale, its market badge, and a chevron
 * ------------------------------------------------------------------ */
.trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--pds-spacing-2xs, 0.5rem);
  height: 2rem;
  padding: 0 0.5625rem 0 0.6875rem;
  background: var(--pds-color-surface-default-secondary, oklch(0.9702 0 0));
  border: 1px solid var(--pds-color-border-input, oklch(0.8853 0 0));
  border-radius: var(--pds-border-radius-button, 3.5rem);
  font-family: var(--pds-typography-ff-default, 'Inter', sans-serif);
  font-size: var(--pds-typography-size-s, 0.875rem);
  font-weight: var(--pds-typography-fw-medium, 500);
  color: var(--pds-color-foreground-default, oklch(0.2046 0 0));
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s cubic-bezier(0.2, 0, 0, 1),
              border-color 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.trigger:hover,
.trigger[aria-expanded='true'] {
  background: oklch(0.94 0 0);
  border-color: oklch(0.75 0 0); /* borderStrong */
}

.trigger svg {
  flex: none;
}

.triggerFailed {
  border-color: var(--pds-color-status-warning-border, oklch(0.6419 0.1457 55.55));
  color: var(--pds-color-status-warning-foreground, oklch(0.5658 0.1338 53.43));
}

.triggerLabel {
  display: inline-flex;
  align-items: center;
  gap: var(--pds-spacing-2xs, 0.5rem);
}

/* The market flag is a decorative tag rather than a status, and no PDS token
   carries this red. */
.triggerBadge {
  flex: none;
  padding: var(--pds-spacing-5xs, 0.125rem) var(--pds-spacing-3xs, 0.375rem);
  border-radius: var(--pds-border-radius-s, 0.25rem);
  background: #e11d2a;
  color: var(--pds-color-foreground-reverse, oklch(1 0 0));
  font-size: var(--pds-typography-size-2xs, 0.6875rem);
  font-weight: var(--pds-typography-fw-semibold, 600);
  letter-spacing: 0.04em;
}

.triggerStatus {
  flex: none;
  margin-left: 3px;
  padding-left: 9px;
  border-left: 1px solid var(--pds-color-border-default, oklch(0.8853 0 0));
}

/* A page out of sync with its source states that on the trigger, in place of
   its review status, and the trigger takes the warning tone with it. */
.triggerChanged {
  background: var(--pds-color-background-warning-subtle, oklch(0.96 0.03 55));
  border-color: var(--pds-color-border-warning, oklch(0.86 0.06 55));
  color: var(--pds-color-foreground-warning, oklch(0.47 0.13 45));
}

.triggerChanged:hover,
.triggerChanged[aria-expanded='true'] {
  background: var(--pds-color-background-warning, oklch(0.93 0.05 55));
  border-color: var(--pds-color-border-warning, oklch(0.86 0.06 55));
}

.triggerDrift {
  display: inline-flex;
  align-items: center;
  gap: var(--pds-spacing-3xs, 0.375rem);
  flex: none;
  margin-left: 3px;
  padding-left: 9px;
  border-left: 1px solid var(--pds-color-border-default, oklch(0.8853 0 0));
  font-weight: var(--pds-typography-fw-semibold, 600);
}

.triggerChanged .triggerDrift {
  border-left-color: var(--pds-color-border-warning, oklch(0.86 0.06 55));
}

/* The toolbar runs out of room before the header does, so the trigger sheds
   what it can spare: the status chip, then the language name, then the flag. */
@media (max-width: 1120px) {
  .triggerStatus {
    display: none;
  }

  /* The glyph alone still says the page is out of sync. */
  .triggerDriftLabel {
    display: none;
  }
}

@media (max-width: 1024px) {
  .triggerName {
    display: none;
  }
}

@media (max-width: 767px) {
  .trigger {
    padding: 0 7px;
    gap: var(--pds-spacing-3xs, 0.375rem);
  }

  .triggerBadge {
    display: none;
  }
}

/* ------------------------------------------------------------------
 * Dropdown panel — portal-rendered, positioned with inline style
 * ------------------------------------------------------------------ */
.dropdown {
  display: flex;
  flex-direction: column;
  background: var(--pds-color-surface-default, oklch(1 0 0));
  border: 1px solid oklch(0.96 0 0); /* borderSubtle */
  border-radius: var(--pds-border-radius-container, 0.375rem);
  box-shadow: var(
    --pds-elevation-overlay,
    0 0 0 1px rgb(0 0 0 / 8%),
    0 1px 1px 0 rgb(0 0 0 / 2%),
    0 8px 16px -4px rgb(0 0 0 / 4%),
    0 24px 32px -8px rgb(0 0 0 / 6%)
  );
  overflow: hidden;
}

/* ------------------------------------------------------------------
 * Rows — one per locale
 * ------------------------------------------------------------------ */
.list {
  list-style: none;
  margin: 0;
  padding: var(--pds-spacing-3xs, 0.375rem);
  overflow-y: auto;
  max-height: 360px;
  flex: 1;
}

.groupLabel {
  margin-top: var(--pds-spacing-4xs, 0.25rem);
  padding: var(--pds-spacing-3xs, 0.375rem) var(--pds-spacing-xs, 0.625rem)
    var(--pds-spacing-5xs, 0.125rem);
  border-top: 1px solid oklch(0.96 0 0); /* borderSubtle */
  font-size: var(--pds-typography-size-2xs, 0.6875rem);
  font-weight: var(--pds-typography-fw-semibold, 600);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pds-color-foreground-default-secondary, oklch(0.5103 0 0));
}

.groupLabel:first-of-type {
  margin-top: 0;
  border-top: none;
}

.item {
  display: flex;
  flex-direction: column;
  border-radius: var(--pds-border-radius-default, 0.188rem);
}

/* One locale is one target: the row and the count under it light up together. */
.item:hover {
  background: var(--pds-color-surface-default-secondary, oklch(0.9702 0 0));
}

.item + .item {
  margin-top: var(--pds-spacing-5xs, 0.125rem);
}

.row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding: 0.55rem 0.64rem;
  background: none;
  border: none;
  border-radius: var(--pds-border-radius-default, 0.188rem);
  font-family: var(--pds-typography-ff-default, 'Inter', sans-serif);
  font-size: var(--pds-typography-size-s, 0.875rem);
  color: var(--pds-color-foreground-default, oklch(0.2046 0 0));
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}

/* The locale, its badge and its status share the row's first line. */
.rowMain {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
}

.row[aria-current='true'] {
  font-weight: var(--pds-typography-fw-semibold, 600);
}

/* The market code at the head of each row. */
.badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 9px;
  background: var(--pds-color-surface-default-secondary, oklch(0.9702 0 0));
  color: var(--pds-color-foreground-default-secondary, oklch(0.5103 0 0));
  font-size: var(--pds-typography-size-xs, 0.75rem);
  font-weight: var(--pds-typography-fw-semibold, 600);
  letter-spacing: 0.02em;
}

.badgeHeld {
  background: var(--pds-color-status-critical-background, oklch(0.9629 0.0152 22.4));
  color: #e11d2a;
}

.rowText {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  flex: 1;
  min-width: 0;
}

.rowName {
  display: flex;
  align-items: center;
  gap: var(--pds-spacing-2xs, 0.5rem);
  font-weight: var(--pds-typography-fw-semibold, 600);
}

.rowSub {
  overflow: hidden;
  font-size: var(--pds-typography-size-xs, 0.75rem);
  font-weight: var(--pds-typography-fw-regular, 400);
  color: var(--pds-color-foreground-default-secondary, oklch(0.5103 0 0));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rtl {
  padding: 0 0.25rem;
  border-radius: var(--pds-border-radius-default, 0.188rem);
  background: var(--pds-color-status-info-background, oklch(0.9683 0.0161 245.08));
  color: var(--pds-color-interactive-link-default, oklch(0.5558 0.2372 267.79));
  font-size: var(--pds-typography-size-xs, 0.75rem);
  font-weight: var(--pds-typography-fw-semibold, 600);
}

.status {
  flex: none;
}

/* The glyph sits on the text's baseline unless the mark is a flex box. */
.current {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.rowDrift {
  display: inline-flex;
  align-items: center;
  gap: var(--pds-spacing-4xs, 0.25rem);
  flex: none;
  font-size: var(--pds-typography-size-xs, 0.75rem);
  font-weight: var(--pds-typography-fw-semibold, 600);
  color: var(--pds-color-foreground-warning, oklch(0.47 0.13 45));
}

/* The count and the way into the list, on the row's second line. */
.review {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pds-spacing-2xs, 0.5rem);
  margin-top: var(--pds-spacing-3xs, 0.375rem);
  /* Aligned with the row's text, past its badge. */
  padding-left: calc(2rem + 11px);
  font-size: var(--pds-typography-size-2xs, 0.6875rem);
  color: var(--pds-color-foreground-warning, oklch(0.47 0.13 45));
}

.reviewNeutral {
  color: var(--pds-color-foreground-default-secondary, oklch(0.5103 0 0));
}

.reviewLink {
  display: inline-flex;
  align-items: center;
  gap: var(--pds-spacing-4xs, 0.25rem);
  font-weight: var(--pds-typography-fw-semibold, 600);
}

.row:hover .reviewLink {
  text-decoration: underline;
}

/* The glyphs hold to the size of the text they sit in. */
.review svg,
.rowDrift svg {
  width: 0.75rem;
  height: 0.75rem;
}

.status :global(.pds-status-indicator__label) {
  font-size: var(--pds-typography-size-xs, 0.75rem);
}

.add {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex: none;
  color: var(--pds-color-interactive-link-default, oklch(0.5558 0.2372 267.79));
  font-size: var(--pds-typography-size-xs, 0.75rem);
  font-weight: var(--pds-typography-fw-semibold, 600);
  white-space: nowrap;
}