@import "./variables";
@import "./mixins";

.exo-input {
    background-color: inherit;
    color: inherit;
    //height: 30px;
    padding: 5px 10px;
    width: 100%;
    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);
    }
    &:disabled:hover{
        background-color: $primary;
    }
}

.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: 100%;
}
.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: 200px !important;
}

// editor

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

.red {
    color: $red;
}

.italic {
    font-style: italic;
}

.back-arrow {
    width: 20px;
    height: 20px;
    position: relative;
    left: -45px;
    &:hover {
        transform: scale(1.1);
    }
    @include down(1800){
        left: 0;
    }
}