.menu{
  @apply rounded-xl cursor-pointer p-1.5 flex items-center justify-start shrink-0 overflow-hidden;
  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);
  .content{
    @apply flex items-center justify-start gap-2;
  }

  
  &.bg-active{
    &::after{
      content: '';
      position: absolute;
      top: 50%;
      right: 0;
      width: .375rem;
      height: 75%;
      transform: translateY(-50%);
      border-radius: inherit;
      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: inherit;
      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;
    }
  }
}

.header{
  --color-primary: var(--ion-color-primary) !important;
  --step-1-opacity: 0.7 !important;
  --step-2-opacity: 0.3 !important;
}