bravo-select input:not(bravo-select[com-filtro] input, bravo-select[url-carregar] input, bravo-select[url-criar] input) {
    caret-color: transparent;
}

bravo-select {
    position: relative;
    box-sizing: border-box;
    cursor: pointer;
}

bravo-select * {
    box-sizing: border-box;
    cursor: pointer;
}

bravo-select:after {
    content: "";
    display: block;
    position: absolute;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 284.929 284.929' %3E%3Cpath d='M282.082,76.511l-14.274-14.273c-1.902-1.906-4.093-2.856-6.57-2.856c-2.471,0-4.661,0.95-6.563,2.856L142.466,174.441 L30.262,62.241c-1.903-1.906-4.093-2.856-6.567-2.856c-2.475,0-4.665,0.95-6.567,2.856L2.856,76.515C0.95,78.417,0,80.607,0,83.082 c0,2.473,0.953,4.663,2.856,6.565l133.043,133.046c1.902,1.903,4.093,2.854,6.567,2.854s4.661-0.951,6.562-2.854L282.082,89.647 c1.902-1.903,2.847-4.093,2.847-6.565C284.929,80.607,283.984,78.417,282.082,76.511z'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.7;
    background-size: 0.7em;
    right: 0;
    width: 2em;
    top: 0;
    bottom: 0;
    pointer-events: none;
    transition: transform 250ms;
}

bravo-select input {
    width: 100%;
}

bravo-select input::placeholder {
    color: #000;
}

bravo-select input:focus::placeholder {
    color: #000;
}

bravo-select[com-filtro] input:focus::placeholder {
    color: #777;
}

bravo-select opcoes {
    display: none;
    color: #000;
}

bravo-select opcoes opcao {
    
    display: block;
}

bravo-select opcoes opcao:hover {
    background-color: var(--cor-2);
    color: var(--cor-1);
}

bravo-select opcoes opcao[oculto] {
    display: none;
}

bravo-select opcoes opcao[marcado] {
    background-color: var(--cor-1);
    color: var(--cor-2);
}

bravo-select button[js-bravoselect-fechar] {
    display: none;
}

@media (min-width: 768px) {
    bravo-select[aberto]::after {
        transform: rotate(180deg);
        transition: transform 250ms;
    }

    bravo-select opcoes {
        border: 1px solid #c7c7c7;
        border-radius: 5px;
        max-height: clamp(150px, 30vh, 500px);
        overflow: auto;
        position: absolute;
        width: 100%;
        left: 0;
        z-index: 9999;
        background-color: #fff;
    }

    bravo-select[aberto] opcoes {
        display: block;
    }

    bravo-select opcoes opcao {
        padding: 10px 10px;
    }
}

@media (max-width: 767px) {

    bravo-select,
    bravo-select * {
        transition: none !important;
    }

    bravo-select[aberto]::after {
        display: none;
    }

    bravo-select button[js-bravoselect-fechar] {
        background-color: transparent;
        border: 0;
        background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 60.963 60.842' style='enable-background:new 0 0 60.963 60.842;' xml:space='preserve'%3E%3Cpath style='fill:%23231F20;' d='M59.595,52.861L37.094,30.359L59.473,7.98c1.825-1.826,1.825-4.786,0-6.611 c-1.826-1.825-4.785-1.825-6.611,0L30.483,23.748L8.105,1.369c-1.826-1.825-4.785-1.825-6.611,0c-1.826,1.826-1.826,4.786,0,6.611 l22.378,22.379L1.369,52.861c-1.826,1.826-1.826,4.785,0,6.611c0.913,0.913,2.109,1.369,3.306,1.369s2.393-0.456,3.306-1.369 l22.502-22.502l22.501,22.502c0.913,0.913,2.109,1.369,3.306,1.369s2.393-0.456,3.306-1.369 C61.42,57.647,61.42,54.687,59.595,52.861z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 15px;
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 9999;
    }

    bravo-select[aberto] button[js-bravoselect-fechar] {
        display: block;
    }

    bravo-select[aberto] button[js-bravoselect-criar] {
        display: inline;
        position: absolute;
        top: 30px;
        right: 0;
        z-index: 9999;
        background-color: transparent;
        border: 0;
    }

    bravo-select[aberto] {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: #ddd;
        z-index: 99999;
        display: flex;
        flex-direction: column;
    }

    bravo-select[aberto] input {
        width: 100%;
        line-height: 50px !important;
        padding: 0 30px;
        border-radius: 0;
        border: 0;
        border-bottom: 1px #e8e8e8 solid;
    }

    bravo-select[aberto] input:focus {
        outline: 0;
        border: 0;
    }

    bravo-select[aberto] opcoes {
        display: block;
        height: fit-content;
        width: 100%;
        border: inherit;
        flex-grow: 1;
        flex-basis: 0;
        overflow: auto;
        background-color: #fafafa;
    }

    bravo-select opcoes opcao {
        line-height: 50px;
        padding: 0 30px;
        border-bottom: 1px #e8e8e8 solid;
    }

    bravo-select[aberto] input[readonly] {
        display: none;
    }
}