/**
 * @file
 * Visual styles for menu.
 */

ul.menu.main-nav {
  @apply
    gap-y-4
    grid
    grid-cols-1
    list-none
    m-0
    p-0
    text-left /* LTR */
    text-white;

  /* Main list items */
  .main-nav-list-item {
    @apply
      border-b
      border-b-light-gray;
    .menu-item {
      a {
        @apply
        after:content-[url('../../images/icons/custom/arrow-right--limegreen-dark-bg.svg')]
        after:float-end
        after:inline-flex
        after:justify-end
        after:w-10;
      }
    }
    .main-nav-has-children {
      button {
        @apply
          after:content-[url('../../images/icons/custom/angle-down--limegreen.svg')]
          /* after:delay-[75ms] */
          /* after:duration-[150ms] */
          /* after:ease-in-out */
          after:float-end
          after:inline-flex
          after:justify-end
          /* after:transition-all */
          after:w-10
          active:after:ease-in-out
          active:after:delay-[50ms]
          active:after:duration-[200ms]
          active:after:rotate-180
          active:after:transition-all
          active:after:translate-x-4
          active:after:-translate-y-2
          focus-within:after:delay-[50ms]
          focus-within:after:duration-[200ms]
          focus-within:after:ease-in-out
          focus-within:after:rotate-180
          focus-within:after:transition-all
          focus-within:after:translate-x-4
          focus-within:after:-translate-y-2;
      }
    }
    /* Child menu list items */
    ul {
      li {
        @apply
        /* w-[calc(100%-40px)] */
        last:border-0;
      }
    }
  }

  a,
  button {
    @apply
      block
      h-12
      p-2
      text-left
      text-xl
      w-full;
  }

  a:active,
  a:focus-within,
  a:hover,
  button:active,
  button:focus-within,
  button:hover {
    @apply
    underline
    decoration-[limegreen];
  }

  /* Hide Dropdowns (1st Child) */
  ul {
    @apply
      hidden;
  }

  /* Display Dropdowns on Focus or Active */
  li:focus > ul,
  li:focus-within > ul,
  li:active div button > ul {
    @apply
      gap-y-4
      grid
      grid-cols-1
      /* translate-x-[40px] */
      ml-10;
  }
}