#overlay-menu-toggle {
  @apply
    cursor-pointer
    relative
    top-px
    ml-5
    z-[9001]

    lg:hidden;

  .hamburger-inner {
    @apply
      bg-primary-500

      before:bg-primary-500

      after:bg-primary-500;
  }
}

#overlay-menu {
  @apply
    relative
    pointer-events-none
    bg-white
    text-white
    h-0
    transition-all
    duration-700
    left-[100vw]
    text-center
    z-[9000];

  &.active {
    @apply
      left-0
      relative
      pointer-events-auto
      opacity-100;

    .overlay-menu-inner {
      @apply
        opacity-100;
    }

    .nav-primary {
      @apply
        opacity-100;
    }
  }

  .overlay-menu-inner {
    @apply
      flex
      flex-wrap
      flex-row
      bg-white
      h-screen
      justify-start
      py-8
      px-5
      overflow-x-hidden
      overflow-y-auto

      lg:py-0;
  }

  .brand {
    @apply
      flex
      mb-6
      justify-center
      w-full;

    img {
      @apply
        h-16;
    }
  }

  .nav-primary {
    @apply
      w-full
      flex
      opacity-0
      transition-all
      duration-500
      delay-75
      flex-col
      pb-16
      relative;

    .nav {
      @apply
        text-primary-500;
    }

    ul.menu {
      @apply
        flex-col
        py-3
        pb-0
        my-6
        mb-0
        -mx-4
        px-4
        border-t
        border-primary-250
        items-start;

      li {
        @extend .has-sm-font-size;
        @apply
          my-[5px]
          ml-0;
      }

      li.border-outline,
      li.button {
        @apply
          mt-4
          px-0
          leading-none
          py-1;

        a {
          @apply
            min-w-30
            inline-block
            leading-none
            w-full
            max-w-none
            text-sm;
        }
      }
    }

    ul {
      @apply
        text-left;

      li {
        @apply
          my-1
          text-lg
          font-medium;

        a {
          @apply
            hover:opacity-50;
        }

        ul {
          @apply
            mb-3
            ml-4;

          li {
            @apply
              text-2xl;

            a {
              @apply
                opacity-75;
            }
          }
        }
      }
    }
  }
}
