.menu {
  @apply absolute w-64 mt-2 py-4 flex flex-col rounded-2xl bg-secondary shadow border;
}

/* Mobile */
.mobileMenu {
  z-index: 101;
  @apply fixed left-0 right-0 top-0 bottom-0 w-full h-full flex flex-col justify-end;
}

.mobileMenu::before {
  content: '';
  z-index: -1;
  @apply fixed top-0 bottom-0 right-0 left-0 bg-black-a-30;
}

.mobileContent {
  overflow-y: scroll;
  max-height: 80%;
  @apply flex flex-col pt-10 pb-8 bg-secondary rounded-t-2xl;
}

.closeBtn {
  flex: 0 0 5rem;
  @apply w-full h-24 pb-2 border-t text-xl bg-secondary font-bold text-primary-80;
}

.mobileTitle {
  @apply text-xl ml-6 mb-4 font-bold;
}

.mobileList {
  @apply m-0 p-0 flex flex-col rounded-2xl;
}

/* MenuItem */
.subfix {
  @apply absolute right-6 pointer-events-none;
}

.menuItem {
  @apply list-none cursor-pointer p-0 my-1 h-16 relative flex items-center;
}

.menuItem:hover {
  @apply bg-primary-05;
}

.menuItemActive {
  @apply font-bold bg-primary-05;
}

.itemContent {
  @apply text-lg text-primary px-6 py-8 flex items-center w-full h-full;
}

.menuItemActive > .itemContent {
  @apply font-bold;
}

.menuItemActive > .itemContent::after {
  @apply absolute right-0 top-0 bottom-0 h-6 w-6 my-auto mx-8 pointer-events-none;
  content: '';
  background-size: 24px;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22feather%20feather-check%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22%3E%3C/polyline%3E%3C/svg%3E');
  background-repeat: no-repeat;
}

@media screen and (min-width: 641px) {
  .menuItem {
    @apply m-0 h-12;
  }
  .menuItem > .itemContent {
    @apply text-sm py-0 px-6;
  }

  .menuItemActive > .itemContent::after {
    @apply my-auto mx-4;
  }
}
