dropdown.pcss

/* The container <div> - needed to position the dropdown content */
.dropdown {
  @apply relative cursor-pointer;
}

.dropbtn {
  @apply p-3 mb-1;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  @apply hidden absolute z-[1] list-none;
}

@media screen and (max-width: 1200px) {
  .dropdown-content {
    position: unset;
  }
}

@media screen and (max-width: 1200px) {
  .dropbtn {
    @apply hidden;
  }
}

/* Links inside the dropdown */
.dropdown-content a {
  @apply block text-white;
}

@media screen and (min-width: 1200px) {
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content,
  .dropdown:focus .dropdown-content {
    @apply flex flex-col gap-3 bg-black w-full p-3;
  }

  .dropdown:hover .dropbtn,
  .dropdown:focus .dropbtn {
    @apply text-white relative;
  }

  .dropdown-content li {
    @apply leading-6;
  }

  .dropdown:hover,
  .dropdown:focus {
    @apply bg-black;
  }
}

.drop-arrow {
  @apply ml-1 relative top-[2px];
}

@media screen and (max-width: 1200px) {
  .drop-arrow {
    @apply hidden;
  }
}