Search

.minisearch {
    margin: 0;
    position: relative;

    &__input {
        display: flex;
        margin: 0;

        & .label {
            display: none;
        }

        & .input__field {
            height: 48px;
            border: 0;
            border-radius: 0 4px 0 0;

            @include mq($screen-l) {
                height: 57px;
            }

            &::placeholder {
                color: $input__placeholder-color;
            }

            &:focus {
                border-color: transparent;
                box-shadow: none;
            }
        }
    }

    & .minisearch__button {
        background-color: transparent;
        position: absolute;
        border: 0;
        padding: 0;
        height: 100%;
        right: 0;
        top: 0;
        padding-right: $spacer--1;
        z-index: 1;
    }

    &__icon {
        fill: $gray-light;
        width: 18px;
        height: 18px;
    }
}

.search-autocomplete {
    display: none;
    top: 48px;
    z-index: 3;
    background-color: $white;
    padding: $spacer--medium $spacer--large;
    width: 100%;
    border: 0;
    border-radius: 0 0 $border-radius $border-radius;
    box-shadow: 0 4px 6px 0 rgba(51, 51, 51, 0.3);
    @include mq($screen-l) {
        top: 57px;
    }

    &__wrapper {
        display: block;
        width: 100%;
    }
    .category-mini-crumb {
        display: none;
    }
    & .smile-elasticsuite-autocomplete-result {
        display: grid;
        grid-template-columns: 60% 40%;
        grid-template-rows: auto;
        grid-template-areas:
        "searchresults searchresults"
        "searchterms  brands";
        grid-gap: $spacer--1;

        @include mq($screen-l) {
            grid-template-areas:
            "searchterms searchresults"
            "brands searchresults";
            grid-template-columns: 25% 75%;
        }
    }

    & .autocomplete-list {
        font-family: $font-family-saira;

        & dd {
            display: flex;
            flex-direction: row;
            align-items: center;
            cursor: pointer;

            &:hover {
                background-color: #f5f5f5;
            }

            & .qs-option-name {
                color: $gray-font;
            }

            & .amount {
                margin-left: $spacer--1;
                color: $gray-font;
            }

            & .product-image-box {
                padding: 0 $spacer--05;
            }
        }
    }

    & .autocomplete-list.list-term {
        grid-area: searchterms;

        & dd {
            margin: $spacer--05 0;
        }
    }

    & .autocomplete-list.list-product {
        grid-area: searchresults;

        display: grid;
        grid-template-areas:
        "titleproduct"
        "product1"
        "product2"
        "product3"
        "product4"
        "product5"
        "product6";
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-gap: $spacer--1;

        border-bottom: 1px solid $gray-light;
        padding-bottom: $spacer--2;

        @include mq($screen-m) {
            grid-template-areas:
            "titleproduct titleproduct"
            "product1 product2"
            "product3 product4"
            "product5 product6";
            grid-template-columns: 1fr 1fr;
        }

        @include mq($screen-l) {
            border-bottom: 0;
            padding-bottom: 0;
            border-left: 1px solid $gray-light;
            padding-left: $spacer--15;
        }
    }

    & .autocomplete-list.list-product_attribute {
        grid-area: brands;

        border-left: 1px solid #c4c4c4;
        padding-left: $spacer--2;

        @include mq($screen-l) {
            border: none;
            padding: 0;
        }

        & dd {
            margin: $spacer--05 0;
        }
    }

    & .autocomplete-list dd:nth-child(2) {
        grid-area: product1;
    }
    & .autocomplete-list dd:nth-child(3) {
        grid-area: product2;
    }
    & .autocomplete-list dd:nth-child(4) {
        grid-area: product3;
    }
    & .autocomplete-list dd:nth-child(5) {
        grid-area: product4;
    }
    & .autocomplete-list dd:nth-child(6) {
        grid-area: product5;
    }
    & .autocomplete-list dd:last-child {
        grid-area: product6;
    }

    & .autocomplete-list-title {
        font-size: $font-size-large;
        font-family: $font-family-saira;
        grid-area: titleproduct;
    }

    & .title-product {
        margin-bottom: $spacer--1;
    }

    & .title-product_attribute {
        margin-bottom: $spacer--05;
    }

    & .product-item {
        margin: 0 $spacer--1;

        & .price__value {
            font-size: $font-size-medium;
        }
    }
}