%item-container {
	font-size: $core-font-size;
	font-weight: bold;
	padding: $content-padding/2 0;
    white-space: normal;
    @include word-wrap(break-word);
	@include transition(0.35s ease);
}

%dropdown-column {
	width: $menu-col-width;
	float: left;
}

// Main Nav
.g-main-nav {
    z-index: 20;
	.g-standard {
		.g-dropdown {
	    	@extend %dropdown-column;
	    }
	}
	.g-toplevel {

		> li {

			> .g-menu-item-container {
				line-height: 1;
				@extend %item-container;
			}

			> .g-menu-item-container {
				> .g-menu-item-content {
                    word-break: normal;
					line-height: normal;
				}
			}

			&.g-parent .g-menu-parent-indicator:after {
				width: 1.25rem;
				padding: 0.25rem;
				height: 1.25rem;
			}
		}

		i {
			opacity: 0.6;
		}
	}

  .g-standard > .g-dropdown, .g-fullwidth > .g-dropdown {
    &:before {
      top: -7px !important;
    }
    .g-dropdown {
      top: -7px;
    }
  }
  .g-standard .g-dropdown, .g-fullwidth .g-dropdown {
    &:after {
      left: -21px !important;
    }
  }

	.g-dropdown {
		text-align: left;
		border-radius: $border-radius;
		.dir-rtl & {
			text-align: right;
		}
	}
	.g-sublevel {
		> li {
			margin: $content-margin/2 $content-margin*1.5;
			padding: 0 0 $content-padding/4 0;
			> .g-menu-item-container {
				line-height: normal;
				@extend %item-container;
				font-size: $core-font-size - 0.15;
				font-weight: bold;
          > .g-menu-item-content {
              vertical-align: top;
              word-break: normal;
              white-space: nowrap;
          }
			}
    		&.g-parent {
	    		.g-menu-parent-indicator {
	    			right: 0;
	    			top: 0;
	    			margin-top: -0.65rem;
					&:after {
						content: "\f105";
						opacity: 0.5;
						position: relative;
						top: 1rem;
					}
				}
			}
		}
	}
}

// Subtitle
.g-menu-item-subtitle {
	opacity: 0.7;
}

// Preset Thumbnails
.g-preset-thumbnails {
	.g-block {
		@include flex(1 1 auto !important);
		> .g-content {
			margin: 1rem 0;
			padding: 0 0.5rem !important;
		}
	}
}

// Dropdown Side Offsets
@include dropdown-offset-x(20px, left);

// Dropdown Top Offsets
@include dropdown-offset-y(5px);

// Nav Overlay
.g-nav-overlay, .g-menu-overlay {
	background: rgba(0, 0, 0, 0.5);
}

.g-menu-overlay.g-menu-overlay-open {
    z-index: 19;
    display: none;
    @include breakpoint(mobile-only) {
        display: block;
    }
}

// Touch Device
.g-menu-hastouch {
	.g-standard, .g-fullwidth {
		.g-toplevel {
			> li {
				&.g-menu-item-link-parent {
					> .g-menu-item-container {
						> .g-menu-parent-indicator {
							border-radius: $core-border-radius;
							margin: -0.2rem 0 -0.2rem 0.5rem;
							padding: 0.2rem;
						}
					}
				}
			}
		}
		.g-sublevel {
			> li {
				&.g-menu-item-link-parent {
					> .g-menu-item-container {
						> .g-menu-parent-indicator {
							border-radius: $border-radius;
							padding: 0.1rem;
							margin-top: -0.1rem;
							margin-right: -0.1rem;
						}
					}
				}
			}
		}
	}
}

// Dropdown Animation
.g-main-nav {
    .g-standard {
        .g-dropdown {
            @include transition(none);
        }

        .g-fade.g-dropdown {
            @include transition(opacity .3s ease-out, transform .3s ease-out);
        }

        .g-zoom.g-active {
            @include animation-duration(.3s);
            @include animation-name(g-dropdown-zoom);
        }

        .g-fade-in-up.g-active {
            @include animation-duration(.3s);
            @include animation-name(g-dropdown-fade-in-up);
        }

        .g-dropdown-bounce-in-left.g-active {
            @include animation-duration(.5s);
            @include animation-name(g-dropdown-bounce-in-left);
        }

        .g-dropdown-bounce-in-right.g-active {
            @include animation-duration(.5s);
            @include animation-name(g-dropdown-bounce-in-right);
        }

        .g-dropdown-bounce-in-down.g-active {
            @include animation-duration(.5s);
            @include animation-name(g-dropdown-bounce-in-down);
        }
    }

    .g-fullwidth > {
        .g-dropdown {
            @include transition(none);
        }

        .g-fade.g-dropdown {
            @include transition(opacity .3s ease-out, transform .3s ease-out);
        }

        .g-zoom.g-active {
            @include animation-duration(.3s);
            @include animation-name(g-dropdown-zoom);
        }

        .g-dropdown-bounce-in-left.g-active {
            @include animation-duration(.5s);
            @include animation-name(g-dropdown-bounce-in-left);
        }

        .g-dropdown-bounce-in-right.g-active {
            @include animation-duration(.5s);
            @include animation-name(g-dropdown-bounce-in-right);
        }

        .g-dropdown-bounce-in-down.g-active {
            @include animation-duration(.5s);
            @include animation-name(g-dropdown-bounce-in-down);
        }
    }
}

@include keyframes(g-dropdown-zoom) {
    0% {
        opacity: 0;
        @include transform(scale3d(.8, .8, .8));
    }
    100% {
        opacity: 1;
    }
}

@include keyframes(g-dropdown-fade-in-up) {
    0% {
        opacity: 0;
        @include transform(translate3d(0, 30px, 0));
    }
    100% {
        opacity: 1;
    }
}

@include keyframes(g-dropdown-bounce-in-left) {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    @include transform(translate3d(-50px, 0, 0));
  }

  60% {
    opacity: 1;
    @include transform(translate3d(25px, 0, 0));
  }

  75% {
    @include transform(translate3d(-10px, 0, 0));
  }

  90% {
    @include transform(translate3d(5px, 0, 0));
  }

  to {
    @include transform(none);
  }
}

@include keyframes(g-dropdown-bounce-in-down) {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    @include transform(translate3d(0, -50px, 0));
  }

  60% {
    opacity: 1;
    @include transform(translate3d(0, 25px, 0));
  }

  75% {
    @include transform(translate3d(0, -10px, 0));
  }

  90% {
    @include transform(translate3d(0, 5px, 0));
  }

  to {
    @include transform(none);
  }
}

@include keyframes(g-dropdown-bounce-in-right) {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    @include transform(translate3d(50px, 0, 0));
  }

  60% {
    opacity: 1;
    @include transform(translate3d(-25px, 0, 0));
  }

  75% {
    @include transform(translate3d(10px, 0, 0));
  }

  90% {
    @include transform(translate3d(-5px, 0, 0));
  }

  to {
    @include transform(none);
  }
}