#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: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    top: 0.9rem;
    left: 1.1rem;
    padding-left: 1px;
    z-index: 10;
    direction: ltr;
}

.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 {
    #g-mobilemenu-container {
        font-family: get-font-family($font-family-default);
        font-weight: bold;
        margin-top: $content-margin;
        margin-bottom: $content-margin;

        .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;
                            opacity: 1;
                            width: 1rem;
                        }
                    }
                }

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

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

                        > .g-menu-item-content {
                            opacity: 1;
                            color: $offcanvas-text-color;
                        }
                    }

                    > .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: $offcanvas-text-color;
                        }
                    }

                    &.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: 1.5rem;
            }
        }
    }
}

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

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

    @include breakpoint(mobile-only) {
        text-align: center;

        .g-block {
            @include flex(0 0 auto);
            width: 45% !important;

            @include breakpoint(mobile-only) {
                @include flex(0 auto !important);
            }
        }

        .g-content {
            margin-left: 5px;
        }
    }
}