// #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);
//         }
//     }
// }

.bg-active{
  --color-primary: var(--ion-color-primary) !important;
  --step-1-opacity: 0.7 !important;
  --step-2-opacity: 0.3 !important;
  // --background: color-mix(in srgb, var(--ion-color-secondary) 70%, transparent 30%) !important;
}
.bg-inactive{
  --color-primary: var(--ion-color-step-250);
  --step-1-opacity: .5;
  --step-2-opacity: .4;
  --step-3-opacity: .8;
}
.menu{
  @apply rounded-xl cursor-pointer p-2 flex items-center justify-center gap-2;
  transition: --color-primary, --step-1-opacity, --step-2-opacity .2s ease-in-out;
  --inset: var(--color-primary) 0px 1.75px 2px 0px inset;
  box-shadow: var(--inset);
}
.toggle:hover{
  --color-primary: var(--ion-color-step-500) !important;
  transition: --color-primary .2s ease-in-out;
} 

.search-button{
  --inset2: var(--ion-color-medium) 0px 0px 5px -1px inset;
    box-shadow: var(--inset2);
}

.menu-search{
  @apply relative overflow-hidden cursor-pointer;
  &.bg-active{
    &::after{
      content: '';
      position: absolute;
      top: 50%;
      right: 0;
      width: .375rem;
      height: 75%;
      transform: translateY(-50%);
      border-radius: 1rem;
      background-color: color-mix(in srgb, var(--ion-color-primary) 70%, transparent);
      opacity: 1 !important;

      filter: drop-shadow(color-mix(in srgb, var(--ion-color-primary) 70%, transparent) 0px 0px 3px)
    }
    &::before{
      content: "";
      position: absolute;
      top: 50%;
      right: -2.3rem;
      width: 5rem;
      height: 7rem;
      transform: translateY(-50%);
      border-radius: 1rem;
      opacity: .5 !important;
      background: radial-gradient(color-mix(in srgb, var(--ion-color-primary) 70%, transparent) 0%, transparent 66%);
    }
  }
  &.bg-inactive{
    --color-primary: var(--ion-color-step-250);
    --step-1-opacity: .5;
    --step-2-opacity: .4;
    --step-3-opacity: .8;
    position: relative;
    &::after{
      content: '';
      opacity: 0;
      transition: opacity .2s ease-in-out;
      will-change: opacity;
    }
    &::before{
      content: '';
      opacity: 0;
      transition: opacity .2s ease-in-out;
      will-change: opacity;
    }
  }
}