@import "../assets/styles/bootstrap/variables";

.Select{
    .Select-value {
        background-color: transparent !important;
    }

    .Select-arrow {
        font-family: 'Material Icons';
        // border-width: 0.2px 6px 2px !important;
        margin-bottom: 4px;
    }

    .Select-menu-outer {

        //background-color:  transparent;
        color: var(--theme-secondary);
        z-index: 100;
        // background-color: $select-multi-bg-color;

        .Select-option {

            &.is-focused {
                background-color: white !important;
                box-shadow: 0 1px 0 var(--theme-secondary);
                color: var(--theme-secondary);
            }

        }

        //   border: 1px solid #ccc;
        //   border-top-color: #e6e6e6;
        //   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
    }

    &.form-group-sm{
        .Select-input {
            height: 26px;

            & > input{
                padding: 4px 0 5px;
            }
        }

        &.Select--single > .Select-control .Select-value {
            line-height: 27px;
            font-size: 12px;
            font-weight: normal;
            padding-left: 15px;
        }

         &.Select--multi {
            & > .Select-control .Select-value {
                font-size: 0.9em;
                line-height: 1.1;
                margin-left: 3px;
                margin-top: 3px;
            }

            .Select-control .Select-multi-value-wrapper {
                padding: 0;
            }
        }
    }
}

.Select-control {
    border: 2px solid $gray !important;
    height: auto;

    .Select-multi-value-wrapper{
        height: auto;
        padding: 2px;
    }
}

.Select--multi .Select-value {
    background-color: $brand-primary !important;
    border-radius: 2px;
    border: 2px solid transparent;
    color: white;
    display: inline-block;
    font-size: 0.9em;
    line-height: 1.5;
    margin-left: 4px;
    margin-top: 4px;
    vertical-align: top;
}

.is-focused > .Select-control {
    border: 2px solid $gray-dark !important;
    box-shadow: none;
}