// ===========================
// Always em here please
// ===========================
$first-level-padding: 1.2em; // get it from settings $dropdownmenu-padding
$submenu-padding-top-bottom: 1.75em;
$submenu-padding-left-right: 1.5em;

.menu .is-active > a {
  background: transparent;
  color: inherit;
}

.navigation-foundation {
  ul {
    list-style: none;
    li {
      margin: 0;
      
      .opens-right {
        ul.is-dropdown-submenu {
          margin-left: 0;
        }
        @include breakpoint(large) {
          .js-dropdown-active {
            animation: drop_down_right_out 0.25s ease-in-out;
            animation-fill-mode: forwards;
            transform-origin: left center;
          }

          &.is-active {
            .js-dropdown-active {
              animation: drop_down_right_in 0.3s ease-in-out;
              animation-fill-mode: forwards;
              transform-origin: left center;
            }
          }
        }
      }

      .opens-left {
        ul.is-dropdown-submenu {
          margin-right: 0;
        }
        @include breakpoint(large) {
          .js-dropdown-active {
            animation: drop_down_left_out 0.25s ease-in-out;
            animation-fill-mode: forwards;
            transform-origin: right center;
          }

          &.is-active {
            .js-dropdown-active {
              animation: drop_down_left_in 0.3s ease-in-out;
              animation-fill-mode: forwards;
              transform-origin: right center;
            }
          }
        }
      }
    }

    &.is-dropdown-submenu {
      padding: $submenu-padding-top-bottom 0;
      margin: 0 (-$submenu-padding-left-right);
      outline: 1px solid transparent;
      z-index: 999;
      @include dropdowns_shadow();

      a {
        color: v(dropdown-secondary-color);

        &:hover {
          color: v(dropdown-accent-color);
        }
      }

      &.js-dropdown-active {
        li {
          opacity: 0;
          animation: menu_dropdowns_li;
          animation-duration: 0.4s;
          animation-fill-mode: forwards;
          @for $i from 1 through 100 {
            &:nth-child(#{$i}) {
              animation-delay: (0.04s * $i);
            }
          }
        }
      }

      li {
        &.menu-item-has-children {
          > a {
            display: flex;
            align-items: center;

            &:after {
              @include nova_icon('\ea04');
              font-size: 0.5em;
              transition: all 0.7s;
              right: $submenu-padding-left-right + $first-level-padding + 1.5em;
              line-height: inherit;
              margin-top: -0.6em;
            }
          }

          &.opens-left {
            > a {
              &:after {
                transform: rotateX(0) rotateY(180deg) rotateZ(0deg);
              }
            }
          }
        }

        a {
          font-size: rem-calc(14);
          line-height: 1.4;
          padding: 0.5em $submenu-padding-left-right + $first-level-padding;
        }
      }

      ul {
        margin-top: -$submenu-padding-top-bottom;
      }
    }
  }

  > ul {
    margin: 0 (-$first-level-padding);

    > li {
      > a {
        .footer-navigation:hover &,
        .header-navigation:hover &,
        .header-secondary-navigation:hover &,
        .topbar-navigation:hover & {
          opacity: $opacity-medium;
        }

        > span {
          position: relative;
          overflow: hidden;
          display: block;
          padding: 0.5em 0;

          &:before {
            content: '';
        		position: absolute;
        		bottom: 0px;
        		left: 0;
        		width: 100%;
        		height: 2px;
        		transform: scaleX(0);
        		transform-origin: right;
        		transition: transform .2s ease-out;
          }
        }

        &.hover {
          opacity: 1 !important;

          > span {
            &:before {
              transform: scaleX(1);
              transform-origin: left;
            }
          }
        }
      }

      &.is-active,
      &:hover {
        > a {
          opacity: 1 !important;
          color: inherit;

          > span {
            &:before {
              transform: scaleX(1);
              transform-origin: left;
            }
          }
        }
      }
      @include foundation_dropdown_animation;
    }
  }

  .no_menu {
    min-height: 60px;
  }
}
