/* ==========================================================================
# Side Area style - begin
========================================================================== */
%sidearea-circles {
	@include qodefOpenerCircles();
}

.qodef-side-area-opener {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
	
	.qodef-side-area-opener-icon {
		display: block;
	}

	&.qodef-side-area-opener--icon-pack {

		.qodef-side-area-opener-icon {
			font-size: 35px;

			* {
				display: block;
				line-height: inherit;

				&:before {
					display: block;
					line-height: inherit;
				}
			}
		}
	}

	&.qodef-side-menu-opener--svg-path {

		.qodef-side-area-opener-icon {

			> * {
				vertical-align: middle;
			}

			> *,
			path {
				fill: currentColor;
				stroke: currentColor;
			}
		}
	}

	&.qodef-side-area-opener--predefined {
		line-height: 1;

		@extend %sidearea-circles;
		
		#qodef-page-header & {
			color: $heading-color;
		}
		
		&:hover {
			@include qodefOpenerCirclesHover();
			color: initial!important;
		}
		
	}

	.qodef-header--light:not(.qodef-header--sticky-display) & {
		
		&.qodef-side-area-opener--predefined {
			&:hover {
				color: #fff!important;
			}
		}

		&.qodef-side-area-opener--icon-pack .qodef-side-area-opener-icon {
			color: #fff;
		}

		&.qodef-side-menu-opener--svg-path .qodef-side-menu-icon {
			> *,
			path {
				fill: #fff;
				stroke: #fff;
			}
		}
	}

	.qodef-header--dark:not(.qodef-header--sticky-display) & {

		&.qodef-side-area-opener--icon-pack .qodef-side-area-opener-icon {
			color: #000;
		}

		&.qodef-side-menu-opener--svg-path .qodef-side-menu-icon {
			> *,
			path {
				fill: #000;
				stroke: #000;
			}
		}
	}
}

#qodef-side-area {
	position: fixed;
	top: 0;
	right: -512px;
	width: 512px;
	height: 100%;
	min-height: 100%;
	padding: 90px 70px 35px;
	background-color: $box-background-color;
	overflow: hidden;
	visibility: hidden;
	z-index: 9999;
	transition: all .6s cubic-bezier(.77,0,.175,1);

	#qodef-side-area-close {
		position: absolute;
		top: 47px;
		right: 70px;
		display: block;
		z-index: 1000;
		color: $text-color;

		.admin-bar & {
			top: 82px;
		}

		&.qodef-side-area-close--icon-pack {
			font-size: 35px;

			* {
				display: block;
				line-height: inherit;

				&:before {
					display: block;
					line-height: inherit;
				}
			}
		}

		&.qodef-side-area-close--svg-path {

			> * {
				vertical-align: middle;
			}

			> *,
			path {
				fill: currentColor;
				stroke: currentColor;
			}
		}

		&.qodef-side-area-close--predefined{
			line-height: 1;

			@extend %sidearea-circles;
			
			@include qodefCloseCircles();
		}
	}
	
	.qodef-side-area--opened & {
		right: 0;
		visibility: visible;
	}
}

.qodef-side-area-cover {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	overflow: hidden;
	z-index: 0;
	transition: opacity 0.2s ease-in-out, z-index 0.2s ease-in-out;
	
	.qodef-side-area--opened & {
		opacity: 1;
		z-index: 1002;
	}
}

/* ==========================================================================
# Side Area style - end
========================================================================== */