.custom-select{
    background-color: #F7F7F7;
    font: 100 16px / 24px 'AvertaStdPE-Regular';
    border-radius: 8px;
    padding: 0;
    height: 64px;
    color: #686664;
    border: 0;
    width: 100%;
    box-sizing: border-box;

    &:has(.avaliable-options[data-active]) {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .option-selected{
        background-color: inherit;
        border:none;
        border-radius: inherit;
        cursor: pointer;
        display: block;
        height: 100%;
        max-width: none;
        padding: 0;
        width: 100%;
    }

    .avaliable-options{
        background-color: inherit;
        display: none;
        margin:0;
        padding:0;
        position: absolute;
        width: 100%;
        z-index: 1000;

        &[data-active] {
            display: flex;
            flex-direction: column;
            gap:10px;
            max-height: 200px;
            overflow: auto;
            padding-bottom: 10px;
        }

        button  {
            background-color: inherit;
            border:none;
            border-radius: inherit;
            cursor: pointer;
            display: block;
            height: 100%;
            max-width: none;
            padding: 0;
            width: 100%;
        }
    }
}