#drawer-button{
    &:hover{
        background-color: color-mix(in srgb, var(--ion-color-dark-tint) 50%, transparent 50%);
        ion-icon{
            color: var(--ion-color-light);
        }
    }
    @apply rounded-full;
}

#menu-conteiner{
    @apply overflow-y-auto overflow-x-hidden size-full;
}

#group-menu{
    --min-height: 3rem;
    --min-width: 3rem;
    @apply transition-all;
    &:hover{
        #tooltip{
            @apply translate-x-0 opacity-100 w-fit #{!important};
        }
    }
}

.bg-active{
    --background: color-mix(in srgb, var(--ion-color-secondary) 70%, transparent 30%) !important;
}
.bg-inactive{
    @apply cursor-pointer;
    --border-radius: 1rem;

    &::part(native){
        @apply transition-all;
    }
    --background: color-mix(in srgb, var(--ion-color-light-shade) 50%, transparent 50%) ;
    &:hover{
        --background: color-mix(in srgb, var(--ion-color-light-shade) 70%, transparent 30%) ;
    }
    @media (prefers-color-scheme: dark) {
        --background: color-mix(in srgb, var(--ion-color-light-tint) 70%, transparent 30%);
        &:hover{
            --background: var(--ion-color-light-tint);
        }
    }
}