.sylect, .search-select-wrapper {
    @extend .dropdown;
    @extend .select;
    &.active {
        &::before {
            transform: translateY(-50%) rotate(90deg);
        }
    }
}
.sylect-input, .ss-input {
    @extend %global-input-prop;
    min-height: 2.5em;
    cursor: pointer;
    @extend .align-center-y;
    @extend .pad-15-l;
    @extend .pad-30-r;
    > .chip {
        position: relative;
        z-index: 1;
        @extend .mar-5-y;
    }
}
.sylect-search, .ss-search {
    @extend .width-100;
    border-bottom: 1px solid $colorWhiteDarkest;
    padding-left: 15px !important;
    @extend .pad-35-r;
    @extend .input;
    @extend .icon;
    @extend .right;
    @extend .bg-white-dark;
    input {
        padding: 0 !important;
        border: 0 !important;
        height: 2.5em;
        background-color: transparent;
        box-shadow: unset;
    }
    label {
        background-color: transparent;
    }
}
.sylect-drop, .ss-drop {
    @extend .drop-box;
    @extend .width-100;
    @extend .pad-0;
    top: 100%;
    max-height: 254px;
    overflow-x: hidden;
    overflow-y: auto;
    &::-webkit-scrollbar {
        width: 3px;
    }
    &::-webkit-scrollbar-track {
        background-color: rgba($colorFirst, .2);
        border-radius: 5px;
    }
    &::-webkit-scrollbar-thumb {
        background: $colorFirst;
        border-radius: 15%;
    }
    > ul {
        overflow-y: auto;
        overflow-x: hidden;
        @extend .block-items;
        > li {
            @include padding(10, 15);
            cursor: pointer;
            @extend .align-center-y;
            @extend .text-elipsis;
            &:hover {
                @extend .bg-white-darken;
            }
            &.active {
                @extend .bg-first;
                color: $colorWhite;
                @extend .fa-icon;
                @extend .fa-times;
                padding-right: 30px;
                @extend .relative;
                &:hover {
                    &::before {
                        transition: 300ms all ease-out;
                        opacity: 1;
                    }
                }
                &::before {
                    @extend .absolute;
                    right: 15px;
                    height: 11px;
                    top: calc(50% - 5.5px);
                    opacity: 0;
                    transition: 300ms all ease-in;
                    pointer-events: none;
                }
            }
        }
    }
}