/* ==========================================================================
   Opener icon styles
   ========================================================================== */

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

	.qodef-m-icon {
		position: relative;
		visibility: visible;

		&.qodef--close {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			visibility: hidden;
			display: flex;
			flex-direction: row-reverse;
			align-items: center;

			.qodef-fs-label-close {
				font-family: $heading-font;
				text-transform: uppercase;
				font-weight: 700;
				letter-spacing: .02em;
				line-height: .881em;
				font-size: 19px;
				margin: 0;
				color: $heading-color;
				position: absolute;
				right: 44px;
			}
		}
	}

	&.qodef-source--icon-pack {
		font-size: 35px;

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

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

		&.qodef--opened {

			.qodef-m-icon {

				&.qodef--open {
					visibility: hidden;
				}

				&.qodef--close {
					visibility: visible;
				}
			}
		}
	}

	&.qodef-source--svg-path {

		span {
			position: relative;

			> * {
				vertical-align: middle;
			}

			> path {
				fill: none;
				stroke: currentColor;
			}
		}

		&.qodef--opened {

			.qodef-m-icon {

				&.qodef--open {
					visibility: hidden;
				}

				&.qodef--close {
					visibility: visible;
					opacity: 1;
				}
			}
		}
	}

	&.qodef-source--predefined {

		&.qodef--opened {

			.qodef-m-icon {

				&.qodef--open {
					visibility: hidden;
				}

				&.qodef--close {
					visibility: visible;
				}
			}
		}

		.qodef-svg--menu {
			fill: currentColor;
			stroke: none;

			g {
				transform: rotate(0deg);
				transform-box: fill-box;
				transform-origin: center;
				transition: transform .3s ease;

				&:nth-child(1) {
					transition-delay: 0s;
				}

				&:nth-child(2) {
					transition-delay: 0.08s;
				}

				&:nth-child(3) {
					transition-delay: 0.16s;
				}

				&:nth-child(4) {
					transition-delay: 0.24s;
				}
			}
		}

		.qodef-svg--close {
			transform: rotate(0);
			transition: transform .4s cubic-bezier(0.33, 1, 0.68, 1);
		}

		&:hover {

			.qodef-svg--menu {

				g {
					transform: rotate(45deg);
				}
			}

			.qodef-svg--close {
				transform: rotate(90deg);
			}
		}
	}

	.qodef-m-icon {

		&.qodef--open {
			display: flex;
			flex-direction: row-reverse;
		}

		.qodef-fs-menu-label, .qodef-fs-menu-label-close {
			margin: 0 30px 0 0;
		}
	}
}