#g-offcanvas {
	background: $offcanvas-background;
	width: $offcanvas-width;
	color: $offcanvas-text-color;
	a {
		color: lighten($offcanvas-background, 50%);
		&:hover {
			color: $offcanvas-text-color;
		}
	}

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

	.button {
		background: $accent-color-2;
		color: $offcanvas-text-color;
		&:hover {
			background: lighten($accent-color-2, 5%);
		}
		&:active {
			background: darken($accent-color-2, 5%);
		}
	}
}

.g-offcanvas-toggle {
	font-size: $core-font-size + 0.5;
	color: $offcanvas-toggle-color;
	@if $offcanvas-toggle-visibility == 1 {
		display: none;
		@media only all and (max-width: $breakpoints-mobile-menu-breakpoint) {
			display: block;
		}
	} @else {
	    display: block !important;
	}
}

// Mobile Menu
#g-offcanvas {
	#g-mobilemenu-container {
		ul {
			background: $offcanvas-background;
			> li {
				> .g-menu-item-container {
					color: $offcanvas-text-color;
				}
				&:not(.g-menu-item-type-particle):not(.g-menu-item-type-module) {
					&:hover, &.active {
						background: darken($accent-color-1, 4%);

						> .g-menu-item-container {
							color: $offcanvas-text-color;
						}
					}
				}
				&.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, 8%);
							}
							border-radius: $core-border-radius;
							margin: -0.2rem 0 -0.2rem 0.5rem;
							padding: 0.2rem;
						}
					}
				}
			}
			.g-dropdown-column {
				width: $offcanvas-width;
			}
		}
	}
}

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

@media print {
	#g-offcanvas {
		background: #fff !important;
		color: #000 !important;
	}
}

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

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