.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);
      }
  }
}