.search-bar {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    gap: 1rem;

    .search__input {
        position: relative;
        flex-grow: 1;

        > label { display: contents; }
        input { width: 100%; }
        input:placeholder-shown {
            color: var(--gray);
            font-weight: bolder;
            font-style: italic;
            text-overflow: ellipsis;
        }
    }

    .search__button {
        background-color: var(--button-research-background);
        color: var(--button-research-color);
    }

    @container (min-width: 70em) {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}