// Nav
.studiare-navigation {
  position: relative;

  ul {
    @include list-unstyled;
    margin: 0;
    padding: 0;
  }

  ul.menu,
  .menu > ul {
    display: flex;
    flex-direction: row;

      > li {
        margin: 0 5px;

        > a {
          font-size: 16px;
          padding: 6px 12px;

          i {
            opacity: 0.7;
            margin-left: 7px;
          }
        }

        &:hover {

          > ul {
            opacity: 1;
            visibility: visible;
            transform: translate(0, 0);
          }

        }

        /* Second Level*/
        ul {
          opacity: 0;
          visibility: hidden;
          position: absolute;
          top: 45px;
          left: 0;
          width: 240px;
          @include box-shadow(0 0 10px 0 rgba(0,0,0,.12));
          background-color: $white;
          border-radius: $border-radius;
          transform: translate(0, 10px);
          @include transition(all 0.25s ease);
          z-index: 200;

          &:after {
            @include pseudo();
            display: block;
            position: absolute;
            top: -15px;
            left: 0;
            width: 240px;
            height: 15px;
            background-color: transparent;
          }

          li {
            position: relative;
            width: 100%;

            &.menu-item-has-children {
              > a {
                position: relative;
                &:after {
                  content: '';
                  display: block;
                  position: absolute;
                  right: 20px;
                  top: 50%;
                  margin-top: -4px;
                  width: 0;
                  height: 0;
                  border-style: solid;
                  border-width: 4px 0 4px 6px;
                  border-color: transparent transparent transparent gray('300');
                }
              }
            }

            &:after {
              @include pseudo();
              position: absolute;
              left: 20px;
              right: 20px;
              height: 1px;
              background-color: gray('200');
            }

            &:last-child {
              &:after {
                display: none;
              }
            }

            &:hover {
              > ul {
                visibility: visible;
                opacity: 1;
                transform: translate(0, 0);
              }
            }

            > a {
              display: block;
              padding: 10px 20px;
              font-size: 14px;
            }

            > ul {
              top: 0;
              left: 100%;
              transform: translate(10px, 0);
              z-index: 30;
            }

          }

        }
      }

      li {
        position: relative;

        &.current_page_item > a,
        &.current-menu-ancestor > a,
        &.current-menu-parent > a,
        &.current-menu-item > a {
          color: color('blue');
        }
      }
  }

  @include media-breakpoint-down(md) {
    display: none;
  }

}