/* <ad-settings>: language and appearance side by side. When the header's
 * tools row (a query container named "tools") is narrower than 31em, once
 * enhanced, an icon-only gear button (44 px, named by hidden text) sits after
 * the search form and shows or hides them. The element itself has no box, so
 * the button and the panel are items of the tools row. */
.site-settings {
  display: contents;
}

.site-settings__panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-xs);
}

.site-settings__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: var(--target-comfortable);
  block-size: var(--target-comfortable);
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--bg-raised);
  color: var(--text);
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.site-settings__toggle:hover {
  background: var(--bg-tint);
  border-color: var(--accent);
  color: var(--accent-strong);
}

.site-settings__toggle[aria-expanded="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}

.site-settings__icon {
  inline-size: 1.4em;
  block-size: 1.4em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 31em of the row's own font: room for a usable search field, the search
 * button, the three short language pills and the three appearance options. */
@container tools (width < 31em) {
  .site-settings[data-enhanced] .site-settings__toggle {
    display: inline-flex;
  }

  /* The open panel takes its own full row under the search and the gear. */
  .site-settings[data-enhanced] .site-settings__panel {
    inline-size: 100%;
    justify-content: space-between;
    padding-block-start: var(--space-xs);
  }

  .site-settings[data-enhanced]:not([data-open]) .site-settings__panel {
    display: none;
  }

  /* While the script is on its way (data-js is set by theme-init.js before the
   * first paint) the panel is hidden already and the gear's 44 px slot is held,
   * so the search field does not grow when the button appears. Without
   * JavaScript the marker is absent and the panel stays visible. */
  [data-js] .site-settings:not([data-enhanced]) .site-settings__panel {
    display: none;
  }

  [data-js] .site-settings:not([data-enhanced])::after {
    content: "";
    flex: none;
    inline-size: var(--target-comfortable);
    block-size: var(--target-comfortable);
  }
}