/* Nice Select Style */

.js-select {
    width: 100%;
    height: 55px;
    line-height: 55px;
    font-size: 15px;
    font-weight: 400;
    color: var(--paragraph-color);
    border: 1px solid var(--input-color);
    box-shadow: 0 0 10px rgba($white, .01);
    @include transition(300ms);
    padding: 0 30px 0 15px;
    &:focus {
        border: 1px solid var(--input-color);
    }
    .nice-select-search-box {
        height: 100%;
        .nice-select-search {
            vertical-align: top;
        }
    }
    &:after {
        border-bottom: 2px solid var(--light-color);
        border-right: 2px solid var(--light-color);
        height: 7px;
        margin-top: -2px;
        right: 20px;
        width: 7px;
        @include responsive(vxxs) {
            right: 10px;
        }
    }
    &.open {
        border: 1px solid #ddd;
        .list {
            width: 100%;
        }
    }
    .list {
        width: 100%;
        margin-top: 10px;
        .selected {
            &.focus {
                background-color: rgba(var(--main-color-one-rgb), .1);
                color: var(--main-color-one);
            }
        }
        .option {
            &:hover {
                background-color: rgba(var(--main-color-one-rgb), .1);
                color: var(--main-color-one);
                font-weight: 500;
            }
        }
    }
}

.js-select.select-style-two {
    display: block;
    color: var(--paragraph-color);
    border: 1px solid var(--input-color);
    box-shadow: 0 0 10px rgba($white, .1);
    &.open {
        &::after {
            // transform: rotate(180deg);
            border-color: transparent transparent var(--paragraph-color);
            border-width: 0px 4px 5px 4px;
        }
    }
    &:after {
        border-color: var(--paragraph-color) transparent transparent transparent;
        border-style: solid;
        border-width: 5px 4px 0 4px;
        height: 0;
        left: auto;
        right: 11px;
        margin-top: 0px;
        position: absolute;
        top: 50%;
        width: 0;
        @include transform(rotate(0deg));
        @include responsive(vxxs) {
            right: 10px;
        }
    }
}