/* Search input of the content header */
/* ------------------------------------------------------------------------- */

/* This widget reuses the generic form markup (.form-group, .form-control, ...)
   but neutralizes most of its styles (stacked-form paddings, input border...).
   It must live in the 'components' layer next to forms.css: in an earlier layer
   these higher-specificity overrides would lose to the generic form styles,
   because layer order beats selector specificity. */

.content-top .content-search {
    flex: 1;
}
.content-top .content-search .form-group {
    flex-basis: 100%;
    padding: var(--ea-sp-1) 0;
}
.content-top .content-search .form-widget {
    align-items: center;
    display: flex;
    flex: unset;
}
@media (min-width: 992px) {
    .content-top .content-search .form-widget {
        display: block;
    }
}
.content-top .content-search .content-search-icon {
    color: var(--content-search-icon-color);
    margin-inline-end: 0;
}
.content-top .content-search .content-search-reset {
    background: var(--content-search-reset-button-bg);
    border-radius: var(--border-radius);
    color: var(--content-search-reset-button-color);
    font-size: var(--font-size-sm);
    padding: var(--ea-sp-1) var(--ea-sp-1);
}
.content-top .content-search .content-search-reset:hover {
    background: var(--content-search-reset-button-hover-bg);
    color: var(--content-search-reset-button-hover-color);
}

.content-top .content-search input[type="search"][name="query"] {
    background: var(--content-search-input-bg);
    border: 0;
    box-shadow: none;
    max-inline-size: unset;
}
/* needed to hide the default [X] mark showed by Webkit browsers in these fields */
.content-top .content-search input[type="search"][name="query"]::-webkit-search-decoration,
.content-top .content-search input[type="search"][name="query"]::-webkit-search-cancel-button,
.content-top .content-search input[type="search"][name="query"]::-webkit-search-results-button,
.content-top .content-search input[type="search"][name="query"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

.content-top .content-search input[type="search"][name="query"]:focus,
.content-top .content-search input[type="search"][name="query"]:active {
    box-shadow: none;
    outline: none;
}

/* copied from https://css-tricks.com/auto-growing-inputs-textareas/#other-ideas */
.content-top .content-search .content-search-label {
    align-items: center;
    display: inline-grid;
    margin: 0;
    padding: 0;

    @media (min-width: 992px) {
        max-inline-size: 600px;
    }
}
.content-top .content-search .content-search-label::after,
.content-top .content-search .content-search-label input {
    grid-area: 1 / 2;
    resize: none;
    inline-size: auto;
}
.content-top .content-search .content-search-label input.is-blank {
    min-inline-size: 300px;
}
.content-top .content-search .content-search-label::after {
    /* the extra blank space is needed to make it look good */
    content: attr(data-value) "    ";
    block-size: 30px;
    visibility: hidden;
    white-space: pre-wrap;
}