/* ==========================================================================
   Single Post Navigation styles
   ========================================================================== */

#qodef-single-portfolio-navigation {
	@include qodefRelativeLayout();
	margin: 0 0 20px;

	.qodef-m-inner {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;

		@include qodefScreenSize480() {
			flex-direction: column;

			.qodef-m-nav-holder {
				position: relative;
				margin-bottom: 20px;

				&:nth-child(1) {
					order: 1;
					margin-bottom: 40px;
				}

				&:nth-child(2) {
					order: 3;
					margin: 30px 0 0 0;
				}

				&:nth-child(3) {
					order: 2;
				}
			}
		}
	}

	.qodef-m-nav {
		@include qodefButtonTextualStyle($bottom: -12px);
		position: relative;
		display: flex;
		align-items: center;

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

		&.qodef--prev {

			.qodef-m-nav-icon {
				margin-right: 5px;
			}
		}

		&.qodef--next {
			flex-direction: row-reverse;
			text-align: right;
			margin-left: auto;

			.qodef-m-nav-icon {
				margin-left: 5px;
			}
		}

		&.qodef--back-link {
			position: absolute;
			top: 0;
			left: calc(50% - 16px); // 16 is half size of icon size

			.qodef-m-nav-icon {
				fill: currentColor;
				stroke: none;
				width: 29px;
				height: 26px;
			}

			.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;
					}
				}
			}

			&:hover {

				.qodef-svg--menu {

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

			.qodef-m-wave,
			.qodef-m-wave-fake {
				display: none;
			}

			@include qodefScreenSize480() {
				position: relative;
				left: 0;
			}
		}
	}

	.qodef-m-nav-icon {
		font-size: 30px;
	}

	.qodef-m-nav-label {
		@include qodefButtonTextualStyle();
		@include qodefHeadingStyle(h6, false);
		padding: 0 3px 0 0 !important;
		font-size: 15px;
		letter-spacing: 0.16em;
	}
}

.qodef-layout--gallery-small, .qodef-layout--images-small, .qodef-layout--slider-small, .qodef-layout--masonry-small {

	#qodef-single-portfolio-navigation {
		margin: 10px 0 20px;
	}
}