.search {
    display: flex;
    align-items: center;
    max-width: 600px;
    width: 100%;
    position: relative;
    color: @text-color;

    &.search--mobile-header {
    }

    &.search--long {
        max-width: unset;
    }

    &.search--centered {
        margin: @reflex-cell-spacing-md auto;
    }

    &.search--with-icon::before {
        font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
        font-weight: 900;
        position: absolute;
        content: '\f002';
        right: 0.5em;
        color: @gray-light;
    }

    .search__groups-btn {
        background-color: @gray-lightest;
        border: 1px solid @border-color;
        border-right: 0;
        outline: none;
        border-radius: 0;
        display: flex;
        align-items: center;
        min-height: 38px;
        padding: 0 15px;
        margin: 0;

        &::after {
            content: "";
            display: inline-block;
            margin-left: 5px;
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid @font-color;
        }

        &.search__groups-btn--active::after {
            border-top: 0;
            border-bottom: 6px solid @font-color;
        }

        &.search__groups-btn--active + .search__groups-results {
            display: block;
        }
    }

    .search__loader {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 80px;
    }

    .search__groups-results {
        display: none;
        min-width: 220px;
        margin: 0;
    }

    .search__field {
        margin: 0;
        flex: 1;
        border-radius: 6px;

        &.search__field--active + .search__results {
            display: flex;
        }
    }

    .search__results {
        display: none;
        min-width: 100%;

        &.search__results--combined {
            min-width: 660px;
        }
    }

    .search__btn {
        margin: 0;
        padding: 8px 15px;
    }

    .search__column {
        display: flex;
        flex-direction: column;
        margin-right: @reflex-cell-spacing-lg;
        position: relative;
        flex-shrink: 0;

        &:last-child {
            margin-right: 0;
        }

        &.search__column--only {
            min-width: 100%;
        }

        &.search__column--products {
            flex: 2;
            max-width: 60%;
        }

        &.search__column--pages {
            flex: 1;
        }
    }

    .search__results-list {
        margin: 0;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    .search__column-header {
        text-transform: uppercase;
        padding: @reflex-cell-spacing-md;
        border-bottom: 1px @gray-lighter solid;
        margin-bottom: 0;
    }
}

.typeahead-search-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid @gray-lighter;

    &:last-child {
        border-bottom: 0;
    }

    &.typeahead-search-result--active {
        background-color: @gray-lighter;
    }

    .typeahead-search-result__image-wrap {
        flex-shrink: 0;
    }

    .typeahead-search-result__content {
        flex-grow: 1;
    }

    .typeahead-search-result__link {
        color: inherit;
        font-weight: bold;
        width: 240px;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
    }
}

@media (max-width: 700px) {

    .search {

        .search__results {
            flex-direction: column;

            &.search__results--combined {
                min-width: unset;
                max-width: ~'calc(100vw - 50px)';
            }
        }

        .search__column {
            &.search__column--products {
                max-width: 100%;
                margin-right: 0;
            }

            &.search__column--pages {
                max-width: 100%;
            }
        }
    }
}