@import "../../style/variables.scss";

.react-select-menu {
    height: 40px;
    text-align: left;

    @media only screen and (min-width: 1441px) {
        height: 52px;
    }

    .css-13cymwt-control {
        background-color: $LightCream;
        border: 1px solid $mainBorder;
        border-radius: 0;
        font-size: 14px;
        line-height: 14px;
        height: 100%;
        cursor: pointer;
        min-width: 200px;

        &:hover {
            border-color: $mainBorder;
        }

        @media only screen and (min-width: 640px) {
            font-size: 16px;
            line-height: 16px;
        }

        // @media only screen and (min-width: 1600px) {
        //     font-size: 22px;
        //     line-height: 22px;
        // }
    }

    .css-t3ipsp-control {
        background-color: $LightCream;
        border: 1px solid $mainBorder;
        border-radius: 0;
        box-shadow: none;
        cursor: pointer;
        font-size: 14px;
        line-height: 14px;
        height: 100%;
        min-width: 200px;

        @media only screen and (min-width: 640px) {
            font-size: 16px;
            line-height: 16px;
        }

        // @media only screen and (min-width: 1600px) {
        //     font-size: 22px;
        //     line-height: 22px;
        // }
        &:focus-within {
            border-color: $primary;

            &:hover {
                border-color: $primary;
            }
        }
    }

    .css-1fdsijx-ValueContainer {
        padding: 0px 10px 0 10px;

        @media only screen and (min-width: 640px) {
            padding: 0px 10px 0 16px;
        }

        @media only screen and (min-width: 1441px) {
            padding: 0px 10px 0 20px;
        }
    }

    .css-t3ipsp-control:hover,
    .css-t3ipsp-control:focus {
        border-color: $mainBorder;
        background-color: $LightCream;
    }

    .css-t3ipsp-control:focus {
        border-color: $primary;
    }

    .css-1jqq78o-placeholder {
        font-size: 14px;
        color: $darkGrey;

        @media only screen and (min-width: 640px) {
            font-size: 16px;
        }

        // @media only screen and (min-width: 1600px){
        //     font-size: 22px;
        // }
    }

    .css-1dimb5e-singleValue {
        padding: 3px 0;
    }

    .css-1dimb5e-singleValue,
    .css-r7ikz2-option,
    .css-rs8ahr-option,
    .css-5zq1nl-option {
        font-size: 14px;
        color: $darkGrey;

        @media only screen and (min-width: 640px) {
            font-size: 16px;
        }

        // @media only screen and (min-width: 1600px){
        //     font-size: 22px;
        // }
    }

    .css-rs8ahr-option,
    .css-r7ikz2-option,
    .css-5zq1nl-option {
        padding: 4px 10px;

        &:hover {
            color: $white;
        }

        @media only screen and (min-width: 640px) {
            padding: 6px 16px;
        }

        @media only screen and (min-width: 1441px) {
            padding: 8px 20px;
        }
    }

    .css-rs8ahr-option,
    .css-5zq1nl-option {
        color: $white;
    }

    .css-1u9des2-indicatorSeparator {
        display: none;
    }

    .css-art2ul-ValueContainer2 {
        padding: 2px 10px;

        @media only screen and (min-width: 640px) {
            padding: 2px 16px;
        }

        @media only screen and (min-width: 1441px) {
            padding: 2px 20px;
        }
    }

    .css-1n6sfyn-MenuList {
        &::-webkit-scrollbar {
            width: 5px;
            height: 5px;
        }
        &::-webkit-scrollbar-thumb {
            background-color: $primary;
        }
        &::-webkit-scrollbar-track {
            background-color: #e6d8c5;
        }
    }

    .css-qbdosj-Input {
        margin: 0;
        padding-top: 0;
        padding-bottom: 0;
        font-size: 14px;

        @media only screen and (min-width: 640px) {
            font-size: 16px;
        }

        @media only screen and (min-width: 1600px) {
            font-size: 22px;
        }
    }

    .css-166bipr-Input {
        padding: 0;
        margin: 0;
    }

    .css-1xc3v61-indicatorContainer {
        &:hover {
            color: $primary;
        }
    }

    .css-1xc3v61-indicatorContainer,
    .css-15lsz6c-indicatorContainer {
        padding-left: 0;
    }

    .css-15lsz6c-indicatorContainer {
        color: $primary;
    }

    .css-1nmdiq5-menu {
        z-index: 2;

        .css-qr46ko {
            max-height: auto;

            &::-webkit-scrollbar {
                width: 0px;
                height: 0px;
            }

            &::-webkit-scrollbar-thumb {
                background-color: var(--primary);
            }

            &::-webkit-scrollbar-track {
                background-color: #e6d8c5;
            }
        }
    }

    .css-1n6sfyn-MenuList,
    .css-1n4zzjl-MenuList,
    .css-1nmdiq5-menu,
    .css-1kiduvf-MenuList {
        max-height: 240px;
        overflow: hidden;

        &::-webkit-scrollbar {
            width: 5px;
            height: 5px;
        }

        &::-webkit-scrollbar-thumb {
            background-color: var(--primary);
        }

        &::-webkit-scrollbar-track {
            background-color: #e6d8c5;
        }
    }

    svg {
        width: auto;
        margin: 0;
    }

    .css-19bb58m {
        margin: 0;
        padding: 0;
    }

    input {
        height: auto !important;
    }
}