/*
 * Global search — Figma "searchbar" (4292:631, variants Open and Close) and "searchbar-open"
 * (4249:756).
 *
 * One markup, two shapes: a 400px field on a wide screen, a pink icon button everywhere else. The
 * button reveals the field, which is why the field is a real `<form>` in both cases — the search
 * keeps working with JavaScript disabled, by submitting to the results page.
 */

.mo-search {
    position: relative;
    display: flex;
    align-items: center;
}

.mo-search__toggle {
    display: flex;
    width: var(--mo-header-control-height);
    height: var(--mo-header-control-height);
    flex: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: var(--mo-border-width-xs) solid var(--mo-border-action);
    border-radius: var(--mo-radius-sm);
    background-color: var(--mo-surface-action-dark);
    color: var(--mo-icon-default-light);
    cursor: pointer;
}

.mo-search__toggle svg {
    width: var(--mo-scale-250);
    height: var(--mo-scale-250);
}

/*
 * 400 x 40 is the **interior** of the field (4292:631) — the 2px stroke is drawn outside it, so the
 * control renders 404 x 44. See the reading in components/header.css, which carries the variable.
 */
.mo-search__form {
    display: flex;
    align-items: center;
    gap: var(--mo-spacing-xxs);
    width: calc(400px + 2 * var(--mo-border-width-xs));
    height: var(--mo-header-control-height);
    padding-inline: var(--mo-spacing-xs);
    border: var(--mo-border-width-xs) solid var(--mo-border-default-medium);
    border-radius: var(--mo-radius-sm);
    background-color: var(--mo-surface-default-white);
}

.mo-search__form svg {
    width: var(--mo-scale-250);
    height: var(--mo-scale-250);
    flex: none;
    color: var(--mo-icon-default-dark);
}

.mo-search__input {
    width: 100%;
    min-width: 0;
    border: 0;
    background: none;
    color: var(--mo-text-body);
    font-family: inherit;
    font-size: var(--mo-font-size-body-sm);
    line-height: var(--mo-line-height-body-sm);
}

.mo-search__input::placeholder {
    color: var(--mo-text-placeholder);
}

.mo-search__input:focus {
    outline: none;
}

/*
 * Focus. The ring of base/reset.css was framing the field in blue as soon as it was clicked — a
 * text field matches `:focus-visible` however it took focus, so narrowing the selector would not
 * have removed it.
 */
.mo-search__form:focus-within {
    outline: none;
}

/*
 * `searchbar-open` (4249:756) is one 400px card: the field is its top region at y=0..40 and the
 * first section starts at y=40, with a single `Border/default-medium` line on the seam. So the
 * suggestions hang off the field rather than floating 8px under it, and the two boxes give up the
 * radius they share. The seam is the bottom border of the field, which is why the panel drops its
 * own top border — stacking both would double the line.
 */
.mo-search__panel {
    --mo-panel-width: calc(400px + 2 * var(--mo-border-width-xs));

    top: 100%;
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.mo-search:has(.mo-search__panel:not([hidden])) .mo-search__form {
    /* The seam is `Border/default-medium` in the maquette, focused field or not. */
    border-bottom-color: var(--mo-border-default-medium);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

/*
 * Below 1440px — and in the compact header at any width — the field is folded behind the button and
 * floats over the page when opened, right-aligned under the trigger.
 */
.mo-search__toggle {
    display: flex;
}

.mo-search__field {
    display: none;
}

.mo-search.is-open .mo-search__field {
    position: absolute;
    z-index: 60;
    top: calc(100% + var(--mo-spacing-xxs));
    right: 0;
    display: block;
}

.mo-search.is-open .mo-search__form {
    max-width: calc(100vw - 2 * var(--mo-margin-body-lr));
}

@media (min-width: 1440px) {
    .mo-header:not(.is-compact) .mo-search__toggle {
        display: none;
    }

    .mo-header:not(.is-compact) .mo-search__field {
        position: static;
        display: block;
    }
}