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

    .search__input {
        flex-grow: 1;

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

            &::placeholder { color: dimgray }
        }
    }

    .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;
    }
}