#g-offcanvas {
    background: $offcanvas-background;
    width: $offcanvas-width;
    color: $offcanvas-text-color;

    a {
        color: $offcanvas-text-color;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    strong {
        color: $offcanvas-text-color;
    }

    .button {
        background: transparent;
        border: 2px solid $offcanvas-text-color !important;
        color: $offcanvas-text-color !important;

        &:hover {
            border: 2px solid $accent-color-1 !important;
            color: $accent-color-1 !important;
        }

        &:active {
            border: 2px solid $accent-color-1 !important;
            color: $accent-color-1 !important;
        }
    }

    hr {
        border-bottom: 1px solid fadeout($white, 50%);
    }
}

.g-offcanvas-toggle {
    @if $offcanvas-toggle-visibility==1 {
        display: none;

        @media only all and (max-width: $breakpoints-mobile-menu-breakpoint) {
            display: block;
        }
    }

    @else {
        display: block;
    }
    
    font-size: $core-font-size+0.5;
    background: transparent;
    color: $offcanvas-toggle-color;
    width: 40px;
    height: 40px;
    line-height: 24px;
    text-align: center;
    top: 2.5rem;
    left: 1.1rem;
    z-index: 10001;
    direction: ltr;
    @include transition(all .4s);

    .toggle-fixed & {
        position: fixed;
    }
}

.g-offcanvas-open {
    .g-nav-overlay {
        z-index: 100000;
    }

    .g-offcanvas-left {
        #g-page-surround {
            left: $offcanvas-width;
        }
    }

    .g-offcanvas-right {
        #g-page-surround {
            right: $offcanvas-width;
        }
    }

    .dir-rtl {
        &.g-offcanvas-left {
            #g-offcanvas {
                right: auto;
            }
        }

        &.g-offcanvas-right {
            #g-offcanvas {
                left: auto;
            }
        }
    }
}

// Mobile Menu
#g-offcanvas {
    padding-left: $content-padding;
    #g-mobilemenu-container {
        font-family: get-font-family($font-family-default);
        font-weight: bold;
        margin-top: $content-margin;
        margin-bottom: $content-margin;
        margin-left: -50%;

        .g-toplevel {
            >li {
                display: block;

                >.g-menu-item-container {
                    padding: $content-padding/4 0;

                    >.g-menu-item-content {
                        padding-left: $content-padding - 1;
                        color: $offcanvas-text-color;
                        word-break: normal;
                    }

                    .g-menu-parent-indicator {
                        &:after {
                            padding: 0;
                            content: "\f105"; //color: $offcanvas-text-color;
                            color: $white;
                            opacity: 1;
                            width: 1rem;
                        }
                    }
                }

                &:hover,
                &.active {
                    >.g-menu-item-container {
                        //color: $offcanvas-text-color;
                        color: $accent-color-1;

                        >.g-selected {
                            color: $accent-color-1;
                        }

                        >.g-menu-item-content {
                            opacity: 1; //color: $offcanvas-text-color;
                            color: transparentize($white,0.4);
                        }
                    }

                    >.g-menu-item-content {
                        opacity: 1;
                    }
                }

                &.g-parent .g-menu-parent-indicator {
                    vertical-align: top;
                    position: absolute;
                }
            }
        }

        ul {
            background: $offcanvas-background;

            >li {
                >.g-menu-item-container {
                    color: $offcanvas-text-color;
                    padding: $content-margin;
                }

                &:not(.g-menu-item-type-particle):not(.g-menu-item-type-module) {

                    &.active,
                    &:hover {
                        >.g-menu-item-container {
                            color: transparentize($white,0.4);
                        }
                    }

                    &.active {}

                    &:hover {
                        //background: darken($accent-color-1, 5%);
                    }
                }

                &.g-menu-item-link-parent {
                    >.g-menu-item-container {
                        >.g-menu-parent-indicator {
                            border: 1px solid lighten($accent-color-1, 6%);
                            background: darken($accent-color-1, 4%);

                            &:hover {
                                background: darken($accent-color-1, 5%);
                            }

                            border-radius: $core-border-radius;
                            margin: -0.3rem 0 -0.2rem 0.5rem;
                            padding: 0.2rem;
                        }
                    }
                }
            }

            .g-dropdown-column {
                width: $offcanvas-width;
            }

            i.fa {
                width: 0.8rem;
                margin-left: 0.5rem;
                margin-right: 0;
                vertical-align: top;
            }
        }
    }
}

#g-mobilemenu-container {
    margin: -($content-padding + $content-margin);
}

// Preset Thumbnails
.g-preset-thumbnails {
    img {
        margin-bottom: 1rem;
        width: 75%;
    }

    @include breakpoint(mobile-only) {
        text-align: center;
        flex-flow: row wrap;

        img {
            width: 60%;
        }    

        .g-block {
            @include flex(1 1 auto !important);
            width: 100% !important;
        }

        .g-content {
            margin-left: -$content-margin;
        }
    }
}