:root {
    --fetis-orange-color: rgb(243, 131, 32);
    --fetis-orange-negative-color: rgb(0, 0, 0);
    --bestool-blue-color: rgb(29, 113, 184);
    --bestool-blue-pale-color: rgb(108, 163, 209);
    --bestool-blue-negative-color: rgb(255, 255, 255);
    --bestool-grayout-color: rgb(143, 143, 143);
    --bestool-highlight-grayout-color: rgb(235, 235, 235);


    --ms-text-grayout: rgb(170, 170, 170);
    --ms-text-hover: rgb(255, 171, 72)
}

.ms-searchbar {
    --ms-searchbtn-color: var(--bestool-blue-color);
}

.ms-results {
    mark {
        background-color: inherit;
        font-weight: bolder;
    }
    --ms-addtocart-color: var(--bestool-blue-color);
    --ms-generic-hover-color: var(--bestool-blue-pale-color);
    --ms-generic-hover-text-color: var(--bestool-blue-negative-color);
    --ms-text-heading-color: var(--ms-text-grayout);
    --ms-category-arrow-color: var(--ms-text-grayout);

    --ms-grayout-color: var(--bestool-grayout-color);
    --ms-grayout-hl-color: var(--bestool-highlight-grayout-color);

    --ms-listprice-color: var(--bestool-grayout-color);
    --ms-saleprice-color: var(--bestool-blue-color);
    --ms-listprice-hl-color: var(--bestool-highlight-grayout-color);
    --ms-saleprice-hl-color: var(--bestool-blue-pale-color);

    --ms-stock-status-out-color: rgb(255, 0, 0);
    --ms-stock-status-order-color: rgb(243, 131, 32);
    --ms-stock-status-in-color: rgb(23, 117, 55);

    --ms-text-hover-color: #000000;
    --ms-text-color: #000000;

    width: 872px;
    position: absolute;
    margin-top: 50px;
    z-index: 4;
}

.ms-search-container {
    line-height: 45px;
    height: 45px;
    padding: 0px;
}

.ms-searchbar {
    display: flex;
    width: 1060px;

    input.ms-search {
        box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px 0px inset;
        height: 100%;
        border-radius: 4px 0px 0px 4px;
        border-width: 0px;
        border-style: none;
        border-color: currentColor;
        border-image: none;
    }

    .ms-clear-button {
        i.icon.icon-cancel-thin {
            margin-right: 15px !important;
            -webkit-box-align: center;
            align-items: center;
            display: flex;
            height: 100%;
        }
        right: 50px !important;
        -webkit-box-align: center;
        align-items: center;
        display: flex;
        height: 100%;
        position: absolute;
        z-index: 4;
    }

    .ms-search-btn-container {
        height: 100%;
        max-height: none;
        z-index: 5;
        margin-left: -1px;
        display: flex;


        > button[type=search] {
            margin-left: 12px;
            width: 45px;
            height: 45px;
            position: relative;
            box-shadow: unset;
            border: 0;
            box-shadow: unset;
            cursor: pointer;
            display: inline-block;
            transition: all 300ms;
            padding: 0;
            border-radius: 4px;
            background-color: var(--ms-searchbtn-color) !important;
            border-color: var(--ms-searchbtn-color) !important;
            z-index: 2;

            .ms-search-btn {
                position: relative;
                display: contents;
                height: 100%;
                width: 100%;

                i.icon-basic-magnifier {
                    &::before  {
                        font-size: 130%;
                        line-height: 150%;
                    }
                    position: absolute;
                    width: 32px;
                    height: 32px;
                    display: block;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    margin: auto;
                    object-fit: contain;
                }
            }
        }
    }
}

.ms-results .ms-popup-container {
    text-size-adjust: 100%;
    font-family: 'Open sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 25.2px;
    text-align: left;
    padding: 5px;

    .ms-list .ms-list-item {
        color: var(--ms-text-color);
        border-radius: 4px;
        line-height: normal;
        align-items: center;
        padding: 10px 5px;
    }

    .ms-list .ms-list-item:hover {
        cursor: pointer;
        background-color: var(--ms-generic-hover-color);
        color: var(--ms-text-hover-color);
    }

    .ms-heading {
        font-size: 11.2px;
        line-height: 20.16px;
        text-transform: uppercase;
        color: var(--ms-text-heading-color);
    }

    .ms-left {
        background-color: #F9F9F9;
        border-radius: 4px 0 0 0;
        > * {
            border-bottom: 1px solid #E8E8E8;
            padding: 10px;
        }

        .ms-category .ms-list-item {
            display: flex;

            > p {
                flex: 1;
            }

            > .ms-category-arrow {
                color: var(--ms-category-arrow-color);
            }

            &:hover > .ms-category-arrow {
                color: var(--ms-grayout-hl-color);
            }
        }
    }

    .ms-right {
        background-color: #FFFFFF;
        border-radius: 0 4px 0 0;

        .ms-items {
            padding: 10px;
        }

        .ms-image {
            width: 50px;
            height: 50px;
        }

        .ms-list .ms-list-item:hover {
            .ms-id {
                color: var(--ms-grayout-hl-color);
            }
            .ms-price-original {
                color: var(--ms-listprice-hl-color);
            }
            .ms-price-sale {
                color: var(--ms-saleprice-color);
                opacity: 1;
            }
        }

        .ms-id {
            font-weight: 500;
            line-height: normal;
            color: var(--ms-grayout-color);
        }

        .ms-name {
            font-weight: 500;
            line-height: normal;
        }

        .ms-order {
            gap: 10px;
            align-items: center;
            .ms-price-original {
                color: var(--ms-listprice-color);
                text-decoration: line-through;
            }

            .ms-price-sale {
                font-weight: 600;
                color: var(--ms-saleprice-color);
                opacity: .8;
            }
            .ms-stock-status {
                border: 1px solid;
                border-radius: 20px;
                padding: 2px 10px;
                line-height: 1;
                ---stock-status-color: var(--ms-stock-status-out-color);
                border-color: var(---stock-status-color);
                color: var(---stock-status-color);
            }
        }

        .ms-add-to-cart {
            height: 38px;
            margin: 0px;
            overflow: hidden;

            font-weight: 600;
            font-size: 12px;
            line-height: 18px;
            vertical-align: middle;

            color: var(--ms-grayout-hl-color) !important;
            background-color: var(--ms-addtocart-color) !important;

            border-color: rgb(20, 20, 20) !important;
            border-style: none;
            border-width: 0px;
        }

        .ms-add-to-cart:hover {
            color: var(--ms-generic-hover-text-color) !important;
            text-decoration-color: rgb(20, 20, 20);
            text-decoration: underline;
            transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,text-decoration .2s ease;
            opacity: .8;
        }
    }

    .ms-bottom {
        width: 100%;

        max-width: 100%;
        border-radius: 0 0 4px 4px;

        cursor: pointer;
        text-align: center;
        padding: 10px 20px;
        justify-content: center;
        color: #4A4A4A;
        background-color: #E8E8E8;
        b {
            font-weight: bolder;
        }
    }

    .ms-bottom:hover {
        background-color: var(--ms-generic-hover-color);
        color: var(--ms-text-hover-color);
    }
}

.ms-results .ms-popup-container {
    display: grid;
    grid-template-columns: 590px;
    grid-template-areas:
        "ms-right"
        "ms-bottom"
    ;

    .ms-left {
        display: grid;
        grid-area: ms-left;
        grid-template-areas:
            "ms-keywords"
            "ms-history"
        ;

        .ms-keywords {
                grid-area: ms-keywords;
            }

            .ms-history {
                grid-area: ms-history;
            }
    }

    .ms-right {
        grid-area: ms-right;

        .ms-list-item {
            display: grid;
            grid-template-columns: 50px auto 120px;
            grid-template-areas: "ms-result-image ms-result-data ms-add-to-cart";
            gap: 10px;
            align-items: center;

            .ms-result-image {
                grid-area: ms-result-image;
            }

            .ms-result-data {
                grid-area: ms-result-data;
            }

            .ms-add-to-cart {
                grid-area: ms-add-to-cart;
            }
        }

        .ms-result-data {
            display: grid;
            grid-template-areas:
                "ms-id"
                "ms-name"
                "ms-order"
            ;

            .ms-id {
                grid-area: ms-id;
            }

            .ms-name {
                grid-area: ms-name;
            }

            .ms-order {
                display: flex;
                grid-area: ms-order;
            }
        }
    }

    .ms-bottom {
        grid-area: ms-bottom;
    }
}