/*
 * Search box of a rubric listing — the "searchbar" component (4052:385) in its open state, laid out
 * as a standalone block instead of inside the header.
 */

.mo-list-search {
    width: 100%;
    max-width: 400px;
}

.mo-list-search__label {
    /* The placeholder is the visible label in the maquette; the real one stays for screen readers. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.mo-list-search__box {
    display: flex;
    align-items: center;
    gap: var(--mo-spacing-xxs);
    height: var(--mo-scale-500);
    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-list-search__icon {
    flex: none;
    width: var(--mo-scale-200);
    height: var(--mo-scale-200);
    color: var(--mo-icon-default-dark);
}

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

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

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

/* The native clear cross of a search input is drawn by the browser and does not follow the tokens. */
.mo-list-search__input::-webkit-search-cancel-button {
    appearance: none;
}