@import "./variables";

.exo-input {
    background-color: inherit;
    color: white;
    height: 30px;
    padding: 5px 10px;
    width: 95%;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 450;
    border: none;
    margin: 10px 0;
    float: left;
    transition: 0.3s;

    border-bottom: 1px solid $border;
    border-radius: 0;
    &:focus {
        border: none;
        outline: none;
        border-radius: 0;
        border-bottom: 1.5px solid $contrast;
        transition: 0.3s;

        //box-shadow: 0 0 0 3px lighten($color: $border, $amount: 20);
    }
    &::placeholder {
        color: lighten($color: $border, $amount: 20);
        font-size: 14px;
    }
}

.exo-btn {
    border: none;
    border-radius: 5px;
    //width: 25%;
    height: 38px;
    font-weight: 700;
    background-color: $primary;
    transition: 0.3s;
    margin-bottom: 10px;
    margin-right: 7px;
    padding: 0 10%;

    &:hover {
        background-color: darken($color: $primary, $amount: 25);
    }
}

.cancel-btn {
    @extend .exo-btn;
    background-color: $red;
    &:hover {
        background-color: darken($color: $red, $amount: 25);
    }
}

.search-container{
    z-index: 10;
}

.search__control, .card-select__control{
    //background-color: $background-dark!important;
    background-color: transparent!important;
    border: none!important;
    border-bottom: 1px solid $border!important;
    border-radius: 0!important;
}

.search__control--is-focused, .card-select--is-focused{
    border: none!important;
    border-bottom: 1px solid $contrast!important;
    box-shadow: none!important;
}
.search-container{
    color: white;
    width: 90%;
}
.search__menu, .card-select__menu{
    background-color: $background-light!important;
    z-index: 100!important;
    scrollbar-color: $contrast $background;
}
.search__input-container{
    color: white!important;
}

.card-select__menu-list{
    z-index: 10000!important;
    max-height: 250px!important;
}

// editor

.model_input-code_input{
    border-radius: 3px;
    width: 100%!important;
    height:95%!important;
}


.red{
    color: $red;
}