@import './variables.scss';
@import './common.scss';
@import './colors.scss';
@import './third-party.scss';

.select-wrap {
    position: relative;
    display: inline-block;
    color: $lightBlack;
    border: 1px solid $shade001;
    border-radius: 5px;
    background: $white;
    text-align: left;
    width: 320px;
    height: 32px;
    max-width: 100%;
    cursor: pointer;
    > span {
        position: relative;
        width: 100%;
        height: 100%;
        display: block;
    }
    // Modifications
    &.-block {
        display: block;
        width: 100%;
    }
    &.-disabled {
        cursor: not-allowed;
        color: $shade003 !important;
        border: 1px solid $shade003 !important;
        &:after {
            border-left: 1px solid $shade003 !important;
        }
        svg {
            fill: $shade003 !important;
        }
    }
    &:after {
        border-left: 1px solid $shade001;
        height: 70%;
        width: 30px;
        position: absolute;
        top: 15%;
        right:0;
        content: '';
    }
}
.select-wrap .searchbar {
    background: inherit;
    position: absolute;
    top: 1px;
    left: 1px;
    font-size: 14px;
    height: 93%;
    max-width: 92%;
    width: 100%;
    padding: 0 10px;
    display: block;
    font-weight: inherit;
    border: 0;
    outline: none;
    display: none;
    color: rgba(0, 0, 0, 0.65);
    &.-show {
        display: block;
    }
}
.no-options {
    position: relative;
    text-align: center;
    border: 1px solid $shade002;
    box-shadow: 3px 3px 5px -1px $shade002;
    padding: 7px 10px;
    color: $lightBlack;
    font-size: 14px;
    border-radius: 5px;
    display: none;
    width: 100%;
    max-width: 100%;
    z-index: 4;
    margin-top: 1px;
    background: $white;
    cursor: default;
    &.-show { 
        display: block;
    }
}
.select-wrap .selected-value {
    position: relative;
    padding-left: 10px;
    max-width: 85%;
    width: 100%;
    display: flex;
    align-items: center;
    height: 100%;
    font-size: 14px;
    @extend .-disable-user-select;
    > p {
        @extend .-ellipsis;
        margin: 0;
        padding:0;
    }
}
.select-wrap .select-options {
    list-style: none;
    border: 1px solid $shade001;
    background-color: $white;
    background-image: none;
    margin: 1px 0 0 0;
    border-top: 0;
    padding: 0;
    width: 100%;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    position: absolute;
    z-index: 10;
    box-shadow: 3px 3px 5px -1px $shade001;
    overflow-y: auto;
    display: none;
    max-height: 6 * 30px;
    > li {
        padding: 7px 10px;
        color: $lightBlack;
        font-size: 14px;
        &:hover,
        &.-active {
            background: $shade002;
        }
    }
    > li:first-child {
        border-top: none !important;
    }
    > li:last-child {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }
    &.-down {
        top: 105%;
        left: 0;
    }
    &.-up {
        bottom: 30px + 5 + 1;
        left: 0;
        border-top: 1px solid $shade001;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }
    &.-open {
        display: block;
    }
}