/* ================================================================
   components/country-list-sort.css
   The "Sort by" control + ranked-row layout shared by the two
   country selector pages:

     • member_state_select.html      → /select_member_state
     • producing_country_select.html → /select_exporter

   Both pages render the same macros from
   templates/components/country_sort_control.html, so the CSS lives
   here once instead of being duplicated into both
   page-*-select.css files. Linked from each page's extra_css block.

   Layered on top of:
     * .cc-detail-toggle (components/toggle.css)    — Rank/A-Z pill
     * .cc-detail-combo  (components/dropdown.css)  — commodity dropdown
     * .info-container / .info-tooltip
                         (components/info-tooltip.css) — (i) tip
   The per-page CSS still owns the .country-list / .country-search
   chrome (sticky header, list height, hover); this file only adds:
     * .cc-country-sort*  — the control between search + list
     * .cc-country-row*   — rank · flag · name · chevron inside <li>

   No design tokens are invented; everything draws from --c, --fs-*,
   --space-*, --color-muted etc.
   ================================================================ */


/* ================================================================
   1. SORT BY CONTROL
   Sits between the search pill and the <ul>, inside the sticky
   .country-search header so it scrolls under the search box, not
   under the list. Vertical stack: label + (i), then segmented pill,
   then commodity combo. The combo hides under the A-Z modifier.
   ================================================================ */

.cc-country-sort {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

/* Header row: "Sort by" + the (i) tooltip trigger. Quiet typography
   that matches every other "label · info" pair across the site. */
.cc-country-sort__head {
    display: flex;
    align-items: center;
    gap: 2px;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-uppercase, 0.08em);
}
/* The shared .info-tooltip is fixed-width (260px) and centred under
   the trigger. The select pages' .country-list is fluid and clamped
   narrow at desktop sizes, so tighten the bubble + anchor it to the
   left so it doesn't overflow into the map.

   text-transform: none defends against the parent .cc-country-sort__head
   which sets `text-transform: uppercase` to render the "SORT BY" label
   in caps — the tooltip is nested inside that head and would inherit. */
.cc-country-sort__tip.info-tooltip {
    width: 240px;
    max-width: 240px;
    text-align: left;
    text-transform: none;
    left: 0;
    transform: none;
}

/* Segmented Rank / A-Z toggle.
   The shared .cc-detail-toggle has flex:1 buttons that stretch to fill
   the parent — fine in this 100%-wide column. The toggle pill itself
   inherits the canonical look (white surface, --color-input-border,
   --radius-pill, --ae-darkblue active fill). */
.cc-country-sort__toggle {
    width: 100%;
}

/* Commodity combo (shows only while Rank is active). Smaller than the
   canonical .cc-detail-combo so it sits cleanly inside the list head
   without competing with the search pill above it. */
.cc-country-sort__combo {
    width: 100%;
}
.cc-country-sort__combo .cc-detail-combo__button {
    padding: 6px 12px;
    font-size: var(--fs-sm);
}
.cc-country-sort__combo .cc-detail-combo__flag {
    width: 18px;
}
.cc-country-sort__combo .cc-detail-combo__option {
    padding: 5px 8px;
    font-size: var(--fs-sm);
}
.cc-country-sort__combo .cc-detail-combo__option-flag {
    width: 18px;
}
/* Hidden via JS toggling [hidden] when A-Z mode is active. The
   attribute selector wins over the base display rule of the combo. */
.cc-country-sort__combo[hidden] { display: none; }

/* "(default)" hint next to "All commodities" in the dropdown menu —
   muted, italic, mirrors the convention used elsewhere on the site. */
.cc-country-sort__hint {
    margin-left: 4px;
    color: var(--color-muted);
    font-weight: 400;
    font-style: italic;
}


/* ================================================================
   2. RANKED ROW LAYOUT  (inside each <li> of the .country-list)
   rank · flag · name · chevron, all in one flex row. The page CSS
   already styles the <li> chrome (padding, hover, border) — this
   file only owns the inner element layout.
   ================================================================ */

.cc-country-row {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Reset list-marker styles inherited from <ul>; the page CSS
       already does it but defending here keeps the component portable. */
    list-style: none;
}
/* The search box hides non-matching rows by setting the [hidden]
   attribute. The display:flex above would override the UA stylesheet's
   [hidden]{display:none} (author rules beat UA rules), so restate it. */
.cc-country-row[hidden] {
    display: none;
}

/* Rank numeral — teal, bold heading font, tabular figures so the
   right edges of single- and double-digit ranks line up. */
.cc-country-row__rank {
    flex: 0 0 22px;
    text-align: right;
    font-family: var(--font-heading);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--ae-darkblue);
    font-variant-numeric: tabular-nums;
}
/* A-Z mode drops the rank numeral entirely — the column would carry
   no signal once the list is alphabetised. The JS toggles .is-alpha
   on the [data-country-sort] root when the user picks A-Z. */
[data-country-sort].is-alpha .cc-country-row__rank {
    display: none;
}

/* Flag — matches the .cc-detail-combo__option-flag treatment (22px
   wide, height auto, tiny corner radius). display: inline-block beats
   reset.css's `img { display: block }`. */
.cc-country-row__flag {
    flex: 0 0 22px;
    width: 22px;
    height: auto;
    border-radius: 2px;
    display: inline-block;
}

/* Country name — fills the remaining space and ellipsises on overflow,
   matching the list's existing text behaviour. */
.cc-country-row__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Chevron — quiet right-aligned affordance. Slightly larger than the
   surrounding text and muted so it doesn't compete with the country
   name. */
.cc-country-row__chev {
    flex: 0 0 auto;
    color: var(--color-muted);
    font-size: 18px;
    line-height: 1;
    margin-left: 2px;
}