%item-container {
    padding: $content-margin $content-margin + 0.15;
    @include responsive-font($responsive-font-size, $core-font-size, 18px, false);
    font-weight: $font-weight-regular;
    letter-spacing: 1px;
    line-height: 1;
    white-space: normal;
    @include word-wrap(break-word);
    @include transition(0.35s ease);
}

%dropdown-column {
    float: left;
}

// Main Nav
.g-main-nav .g-standard .g-dropdown {
    min-width: 190px;
}

.g-main-nav {
    z-index: 20;

    @if $menustyle-background {
        background: $menustyle-background;
    }

    @include breakpoint(desktop-range) {
        white-space: nowrap;
    }

    .g-standard {
        .g-dropdown {
            @extend %dropdown-column;
            .g-dropdown-right{
                .dir-rtl & {
                    left: auto;
                    right: 100%;
                }
            }
        }
    }

    .g-toplevel {
        > li {
            > .g-menu-item-container {
                position: relative;
                @extend %item-container;
                @include transition(all 0.2s ease-in-out);
                top: 0;

                @include breakpoint(tablet-range) {
                    padding: $content-margin 0.35rem;
                }

                #g-navigation & {
                    color: $menustyle-text-color;
                }
            }

            &.g-parent {
                > .g-menu-item-container {
                    &:after {
                        margin-left: -13px;

                        .dir-rtl & {
                            margin-left: 7px;
                        }
                    }
                }
            }

            &:hover, &.active {
                > .g-menu-item-container {
                    #g-navigation & {
                        color: $menustyle-text-color-active;
                    }
                }
            }
            &.active {
                > .g-menu-item-container {
                    font-weight: bold;
                }
            }

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

                .g-menu-parent-indicator {
                    vertical-align: middle;

                    &:after {
                        content: "\f107";
                        font-size: 1.15rem;
                        opacity: 1;
                        text-align: center;
                    }
                }
            }

            &.g-parent.g-selected {
                > .g-menu-item-container {
                    .g-menu-parent-indicator {
                        &:after {
                            content: "\f107";
                        }
                    }
                }
            }
        }

        i {
            opacity: 0.6;
        }
    }

    .g-standard > .g-dropdown, .g-fullwidth > .g-dropdown {
        .g-dropdown {
            top: 0;
        }
    }

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

    .g-dropdown {
        text-align: left;
        background: $menustyle-sublevel-background;
        box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.35);
        border-radius: 10px;

        .dir-rtl & {
            text-align: right;
        }

        .g-dropdown-column {
            > .g-grid {
                > .g-block {
                    &.size-100 {
                        border-radius: 10px;
                    }
                }
            }
        }

        .size-100 {
            > .g-sublevel {
                > li {
                    &.g-go-back {
                        & + li {
                            > .g-menu-item-container {
                                border-top-left-radius: 10px;
                                border-top-right-radius: 10px;
                            }
                        }
                    }

                    &:last-child {
                        > .g-menu-item-container {
                            border-bottom-left-radius: 10px;
                            border-bottom-right-radius: 10px;
                        }
                    }
                }
            }
        }

        div[class*="size"]:not(.size-100) {
            &:first-child {
                > .g-sublevel {
                    > li {
                        &.g-go-back {
                            & + li {
                                > .g-menu-item-container {
                                    border-top-left-radius: 10px;
                                }
                            }
                        }

                        &:last-child {
                            > .g-menu-item-container {
                                border-bottom-left-radius: 10px;
                            }
                        }
                    }
                }
            }

            &:last-child {
                > .g-sublevel {
                    > li {
                        &.g-go-back {
                            & + li {
                                > .g-menu-item-container {
                                    border-top-right-radius: 10px;
                                }
                            }
                        }

                        &:last-child {
                            > .g-menu-item-container {
                                border-bottom-right-radius: 10px;
                            }
                        }
                    }
                }
            }
        }
    }

    .g-sublevel {
        padding: 0;

        > li {
            margin: 0;
            padding: 0;

            > .g-menu-item-container {
                @extend %item-container;
                color: $menustyle-sublevel-text-color !important;

                > .g-menu-item-content {
                    display: inline-block;
                    vertical-align: middle;
                    word-break: normal;
                    white-space: nowrap;
                    line-height: normal;

                    > .g-menu-item-title {
                        padding-bottom: 0.5rem;
                    }
                }
            }

            &:hover, &.active {
                > .g-menu-item-container {
                    color: $menustyle-sublevel-text-color-active !important;
                    background: $menustyle-sublevel-background-active;
                }
            }

            &.g-parent {
                .g-menu-parent-indicator {
                    right: 0.5rem;
                    top: 0.55rem;
                    font-size: $core-font-size + 0.15;

                    .dir-rtl & {
                        top: 0.75rem;
                    }

                    &:after {
                        content: "\f054";
                        opacity: 0.5;
                        position: relative;
                    }
                }
            }
        }
    }
}

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

// Preset Thumbnails
.g-preset-thumbnails {
    margin-top: $content-margin;
    @include justify-content(center);

    .g-active & {
        a {
            color: $menustyle-sublevel-text-color !important;

            @include breakpoint(mobile-only) {
                color: $white !important;
            }
        }
    }

    .g-content {
        padding: $content-padding - 1.5 !important;
        margin: 0;
    }

    .g-block {
        width: 40% !important;
    }

    span {
        padding: $content-margin + 0.3 0;
        display: inline-block;
    }

    img {
        border-radius: 3px;
        margin-bottom: 0 !important;
    }
}

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

.dir-rtl & {
    @include dropdown-offset-x(3px, right);
}

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

// Nav Overlay
.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: $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 {
            border-radius: 10px;
            z-index: 100;
            @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 {
            z-index: 100;
            @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);
        }
    }
}

@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);
    }
}