/*!
 * Easy Select v3.1.0
 * https://github.com/viivue/easy-select
 * MIT license - 2022
 */

/****************************
 * Easy Select Core (no edit)
****************************/
.easy-select {position:relative; z-index:1; cursor:pointer;}
.easy-select * {box-sizing:border-box;}

/* keep select tag invisible over the current text, but still clickable */
.easy-select-native select {
    position:absolute; top:0; left:0; width:100%; height:100%; z-index:2;
    opacity:0; cursor:pointer;
}

/* this will handle the visual display */
.easy-select-current {
    position:relative; z-index:1;
    transition:all .3s ease;
    user-select:none;
}

/* custom dropdown */
.easy-select:not(.show-dropdown) .easy-select-dropdown {opacity:0; visibility:hidden; transform:scale(.9);}
.easy-select-dropdown {
    position:absolute; top:calc(100% + 1px); left:0; z-index:2;
    width:100%;
    transition:all .2s ease;
    transform-origin:top left;
}
.easy-select-dropdown ul {margin:0; padding:0; list-style:none; overflow:auto;}
.easy-select-dropdown ul li {padding:0;}

/* option */
.easy-select-option {
    display:flex; align-items:center; position:relative;
    width:100%;
    transition:all .3s ease;
}

/* disabled */
.easy-select-disabled {cursor:not-allowed;}
.easy-select-option.disabled,
.easy-select-disabled .easy-select-current {opacity:.5; pointer-events:none;}
.easy-select-disabled select {pointer-events:none;}

/****************************
 * Easy Select - Default theme
****************************/
.easy-select {
    --es-select-w:300px;
    --es-dropdown-w:300px;
    --es-dropdown-h:300px;
    --es-select-w-mobile:100%;
    --es-dropdown-w-mobile:100%;

    --es-option-h:50px;

    --es-bg:#fff;
    --es-bg-hover:var(--vii-color-dark-black);
    --es-text:#000;
    --es-text-hover:#fff;

    width:100%; max-width:var(--es-select-w);
}

/* current */
.easy-select-current {border:1px solid var(--vii-color-dark-black); border-radius:5px; overflow:hidden;}
.easy-select-current .easy-select-option {padding-right:40px;}
.easy-select-current .easy-select-option:after {
    position:absolute; top:50%; right:15px;
    transform:translateY(-50%);
    content:"▼"; font-size:.8em; color:inherit;
    display:inline-block; margin-left:10px;
    transition:transform .3s ease;
}
.easy-select.show-dropdown .easy-select-current .easy-select-option:after {transform:translateY(-50%) rotate(180deg);}

/* dropdown showing */
.easy-select.show-dropdown {z-index:2;}

/* dropdown */
.easy-select-dropdown {
    max-width:var(--es-dropdown-w);
    background:var(--es-bg); border:2px solid var(--vii-color-dark-black);
    border-radius:5px; overflow:hidden;
}
.easy-select-dropdown ul {max-height:var(--es-dropdown-h);}
.easy-select-dropdown ul li:not(:last-child) {border-bottom:1px solid rgba(0, 0, 0, .1);}

/* option */
.easy-select-option {
    line-height:1.1;
    min-height:var(--es-option-h); padding:5px 20px;
}

/* dropdown hover: off */
.easy-select-dropdown:hover .easy-select-option.active,
.easy-select-option {background:var(--es-bg); color:var(--es-text);}

/* dropdown hover: on */
.easy-select-native:not(.easy-select-disabled):hover .easy-select-current .easy-select-option,
.easy-select-dropdown:hover .easy-select-option.active:hover,
.easy-select-option:hover,
.easy-select-option.active {color:var(--es-text-hover); background:var(--es-bg-hover);}

/* custom scrollbar */
.easy-select-dropdown ul::-webkit-scrollbar {width:4px;}
.easy-select-dropdown ul::-webkit-scrollbar-track {background:#eee;}
.easy-select-dropdown ul::-webkit-scrollbar-thumb {background-color:#ccc;}

/****************************
 * Responsive
****************************/
@media only screen and (max-width:480px) {
    .easy-select {
        --es-select-w:var(--es-select-w-mobile);
        --es-dropdown-w:var(--es-dropdown-w-mobile);
    }
}