.kg-search-modes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 7px;
}

.kg-search-modes[hidden] {
    display: none;
}

.kg-search-mode {
    appearance: none;
    background: #fff;
    border: 1px solid #c8ced8;
    border-radius: 999px;
    color: #3b4350;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    line-height: 1.25;
    padding: 5px 10px;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.kg-search-mode:hover,
.kg-search-mode:focus-visible {
    border-color: #3767f0;
    color: #264fd0;
    outline: none;
}

.kg-search-mode.is-active {
    background: #3767f0;
    border-color: #3767f0;
    color: #fff;
}

@media (max-width: 480px) {
    .kg-search-modes {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: thin;
    }

    .kg-search-mode {
        flex: 0 0 auto;
    }
}