/* =====================================================================
 * MarpaMail "Choose a Domain" step -- styles for this page variant.
 *
 * Loaded by configureproductdomain.tpl beside this file, so these rules only
 * ever apply to this cart step. Nothing here belongs in css/custom.css.
 *
 * Scope is deliberately narrow. The only visual changes are the extension
 * field gaining a toggle button and a dropdown, and widening from the stock
 * 120px to --mm-tld-field-w so the two match. Spacing, type, colour and the
 * row's structure are left to _configure-product-domain.scss; the sizing class
 * .domain-input-block_tlds now sits on the combobox wrapper, so the field
 * still goes full width under 768px with no rule of our own.
 *
 * The sibling domain input is flex-grow and absorbs the extra width, so the
 * row's height and position do not move. The "Use" button narrows by a few
 * pixels, because .domain-input-block_input is width:100% and over-constrains
 * the row, making every shrinkable item give up a share. That is left alone:
 * flex-shrink:0 on the button would snap it from ~104px to 150px on tablets,
 * a far larger change than the few pixels it moves now.
 *
 * Built only from PHOX's own custom properties, so the brand colour and
 * html.wdes-dark-mode are inherited without a second set of rules.
 * ===================================================================== */

.mm-tld-combo {
    /* 5 rows before the list scrolls, per the spec. Kept as a variable so the
     * row height and the scroll window can never drift apart. */
    --mm-tld-row-h: 42px;
    --mm-tld-visible: 5;
    --mm-tld-toggle-w: 40px;

    /* Field and dropdown are the same width by construction: this sizes the
     * field, and the menu is 100% of it. Change this one value and they stay
     * matched. */
    --mm-tld-field-w: 240px;

    position: relative;

    /* The row is a flex container. An <input> resists shrinking below its
     * intrinsic size, a <div> does not, so without this the wrapper collapses
     * from the 120px the stock field occupied to ~96px. */
    flex-shrink: 0;
}

/* Widen the field past the stock 120px to give the extension and the toggle
 * button room. The rule it has to beat compiles to
 * `#order-phox .domain-input-group .domain-input-block_tlds`, and an id
 * outranks any number of classes -- so #order-phox has to be repeated here.
 * The sibling domain input is flex-grow, so it gives up exactly the
 * difference and the rest of the row is unchanged. */
#order-phox .domain-input-group .domain-input-block_tlds.mm-tld-combo {
    width: var(--mm-tld-field-w);
}

/* The wrapper carries .domain-input-block_tlds now, so the input just fills
 * it. Padding clears the toggle button without moving the text baseline. */
.mm-tld-combo__input {
    width: 100%;
    padding-right: calc(var(--mm-tld-toggle-w) + 4px);
}

/* --plain is emitted when no extensions are configured: the field is then the
 * stock text input, so it must not advertise a dropdown it does not have. */
.mm-tld-combo--plain .mm-tld-combo__input {
    padding-right: inherit;
}

/* ---------- toggle button ---------- */

.mm-tld-combo__toggle {
    position: absolute;
    top: 1px;
    right: 1px;
    /* Inset by the field's 1px border so the divider stops flush against it
     * instead of crossing it. */
    bottom: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--mm-tld-toggle-w);
    padding: 0;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--gray-lighter-4);
    border-radius: 0 var(--radius) var(--radius) 0;
    cursor: pointer;
    transition: background-color 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.mm-tld-combo__toggle:hover,
.mm-tld-combo.is-open .mm-tld-combo__toggle {
    background-color: var(--gray-faded);
    background-color: color-mix(in srgb, var(--brand-primary) 8%, transparent);
}

.mm-tld-combo__toggle:focus {
    outline: 0;
}

.mm-tld-combo__chevron {
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--text-lighter-color);
    border-bottom: 1.5px solid var(--text-lighter-color);
    /* Nudged up by a quarter of its height so the rotated square reads as
     * centred: a chevron's visual centre sits below its box centre. */
    transform: translateY(-25%) rotate(45deg);
    transition: transform 0.15s ease, border-color 0.15s ease;
    pointer-events: none;
}

.mm-tld-combo.is-open .mm-tld-combo__chevron {
    border-color: var(--brand-primary);
    transform: translateY(25%) rotate(225deg);
}

/* ---------- menu ---------- */

.mm-tld-combo__menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    /* Exactly the field's width, at every breakpoint -- including under 768px
     * where the field goes full width. Anchored to the field's left edge, so
     * it can never reach the viewport edge either. */
    width: 100%;
    max-height: calc(var(--mm-tld-row-h) * var(--mm-tld-visible));
    margin: 0;
    padding: 4px 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--block-bg);
    border: var(--block-border, 1px solid var(--gray-lighter-4));
    border-radius: var(--radius);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
    list-style: none;
}

/* The rows below set `display: flex`, and an author rule always beats the UA
 * stylesheet's `[hidden] { display: none }` -- without this the filter would
 * set .hidden on every non-match and none of them would actually disappear.
 * Higher specificity than the row rules (class + attribute), so it wins. */
.mm-tld-combo [hidden] {
    display: none;
}

.mm-tld-combo__option,
.mm-tld-combo__empty {
    display: flex;
    align-items: center;
    height: var(--mm-tld-row-h);
    padding: 0 12px;
    color: var(--text-body-color);
    font-size: var(--font-size-base);
    line-height: 1;
    white-space: nowrap;
}

.mm-tld-combo__option {
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

/* One highlight for hover and for keyboard, so arrowing through the list and
 * moving the mouse cannot show two highlighted rows at once. */
.mm-tld-combo__option.is-active {
    background-color: var(--gray-faded);
    background-color: color-mix(in srgb, var(--brand-primary) 10%, var(--block-bg));
    color: var(--brand-primary);
}

.mm-tld-combo__empty {
    color: var(--text-lighter-color);
    cursor: default;
}

/* ---------- scrollbar ---------- */

.mm-tld-combo__menu {
    scrollbar-width: thin;
    scrollbar-color: var(--gray-lighter-4) transparent;
}

.mm-tld-combo__menu::-webkit-scrollbar {
    width: 6px;
}

.mm-tld-combo__menu::-webkit-scrollbar-track {
    background: transparent;
}

.mm-tld-combo__menu::-webkit-scrollbar-thumb {
    background-color: var(--gray-lighter-4);
    border-radius: 3px;
}

.mm-tld-combo__menu::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-lighter-color);
}

/* ---------- mobile ---------- */

/* _configure-product-domain.scss switches .domain-input-block_tlds to full
 * width here and stacks the row, so the field keeps the stock mobile layout
 * and the menu tracks it exactly -- no overhang at any phone width. */
@media screen and (max-width: 767px) {
    #order-phox .domain-input-group .domain-input-block_tlds.mm-tld-combo {
        width: 100%;
    }
}

/* ---------- dark mode ---------- */

/* PHOX's dark mode leaves --brand-primary at its light-mode value, which is
 * too dark to read as text on a near-black panel. Lift it only where the
 * brand colour is used for type, matching the homepage variant. */
.wdes-dark-mode .mm-tld-combo__option.is-active {
    color: color-mix(in srgb, var(--brand-primary) 55%, #fff);
}

.wdes-dark-mode .mm-tld-combo.is-open .mm-tld-combo__chevron {
    border-color: color-mix(in srgb, var(--brand-primary) 55%, #fff);
}

.wdes-dark-mode .mm-tld-combo__toggle {
    border-left-color: var(--gray-lighter-4);
}

.wdes-dark-mode .mm-tld-combo__toggle:hover,
.wdes-dark-mode .mm-tld-combo.is-open .mm-tld-combo__toggle {
    background-color: color-mix(in srgb, #fff 8%, transparent);
}

.wdes-dark-mode .mm-tld-combo__menu {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}