.shop-search-color-select {
    position: relative;
    height: 50px;
    overflow: hidden;
    transition: $transition;
    box-shadow: inset 0 0 0 1px rgba($m3, 0.15);
    @media all and (max-width: 639px) {
        height: 46px;
    }
    &:hover {
        box-shadow: inset 0 0 0 2px $m1;
    }
    &:before {
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 3;
        pointer-events: none;
        box-shadow: inset 0 0 0 1px rgba($lightColor, .1);
    }
    &.active {
        z-index: 2;
        overflow: visible;
        box-shadow: none !important;
        &:before {
            display: none;
        }
        .shop-search-colors {
            max-height: 240px;
            overflow-y: auto;
            box-shadow: inset 0 0 0 2px $m1;
            background: url(data-image-svg(8px, 6px, '<path d="M1.00158 -0.000503846L6.99745 -0.000503584C7.85371 -0.000503546 8.31403 1.10269 7.75431 1.81334L4.75637 5.61965C4.35746 6.12611 3.64156 6.12611 3.24265 5.61965L0.244716 1.81334C-0.315011 1.10269 0.145317 -0.000503883 1.00158 -0.000503846Z" fill="#{$m3}"/>')) right 16px top 23px no-repeat $lightColor;
        }
        &:hover {
            .shop-search-colors {
                background: url(data-image-svg(8px, 6px, '<path d="M1.00158 -0.000503846L6.99745 -0.000503584C7.85371 -0.000503546 8.31403 1.10269 7.75431 1.81334L4.75637 5.61965C4.35746 6.12611 3.64156 6.12611 3.24265 5.61965L0.244716 1.81334C-0.315011 1.10269 0.145317 -0.000503883 1.00158 -0.000503846Z" fill="#{$m3}"/>')) right 16px top 23px no-repeat $lightColor;
            }
        }
    }
    .shop-search-colors {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        padding: 0 7px;
        transition: box-shadow 0.3s;
        @include flexbox;
        @include flex-direction(column);
        background: url(data-image-svg(8px, 6px, '<path opacity="0.2" d="M1.00158 -0.000503846L6.99745 -0.000503584C7.85371 -0.000503546 8.31403 1.10269 7.75431 1.81334L4.75637 5.61965C4.35746 6.12611 3.64156 6.12611 3.24265 5.61965L0.244716 1.81334C-0.315011 1.10269 0.145317 -0.000503883 1.00158 -0.000503846Z" fill="#{$m3}"/>')) right 16px top 23px no-repeat;

        &:hover {
            background: url(data-image-svg(8px, 6px, '<path d="M1.00158 -0.000503846L6.99745 -0.000503584C7.85371 -0.000503546 8.31403 1.10269 7.75431 1.81334L4.75637 5.61965C4.35746 6.12611 3.64156 6.12611 3.24265 5.61965L0.244716 1.81334C-0.315011 1.10269 0.145317 -0.000503883 1.00158 -0.000503846Z" fill="#{$m3}"/>')) right 16px top 23px no-repeat;
        }

        li {
            cursor: pointer;
            padding: 11px 40px 11px 16px;
            @include flexbox;
            @media all and (max-width: 639px) {
                padding-top: 9px;
                padding-bottom: 9px;
            }
            &:hover {
                background: rgba(0, 0, 0, 0.03);
                .shop-search-color-title {
                    color: $m3;
                }
            }
            &.shop2-color-ext-selected {
                @include order(-1);
                padding-left: 9px;
                &:hover {
                    background: none;
                }
            }
            .shop-search-color-icon {
                position: relative;
                width: 28px;
                height: 28px;
                flex-shrink: 0;
                border-radius: 50%;
                margin: 0 10px 0 0;
                background-size: cover;
                background-position: 50%;
                background-repeat: no-repeat;
                &:before {
                    position: absolute;
                    content: '';
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    z-index: 1;
                    border-radius: 50%;
                    pointer-events: none;
                    box-shadow: inset 0 0 0 1px rgba(#000, .1);
                }
            }
            .shop-search-color-title {
                color: rgba($m3, 0.6);
                font: normal 16px/ normal $Montserrat;
                width: calc(100% - 10px - 8px);
                min-height: 28px;
                overflow: hidden;
                white-space: nowrap;
                transition: $transition;
                @include inline-flex;
                @include align-items(center);

                @media all and (max-width: 639px) {
                    font-size: 15px;
                    min-height: 26px;
                }
            }
        }
    }
}