/* Single Post */

@import '../config';
@import '../mixins';
@import '../direction';

/* Theme SCSS Framework */
// @set_theme_configuration

.post-single {
	&.sticky-post > .post-wrap {
		.post-title::after {
			content: 'Sticky';
			position: relative;
			top: -15px;
			padding: 0 4px;
			margin-#{$left}: 5px;
			border-radius: 2px;
			color: #fff;
			background-color: var(--rio-primary-color, #27c);
			font-size: 1.2rem;
			font-weight: 400;
			letter-spacing: 0;
		}
	}
	> .post-wrap .post.format-video .post-title::after {
		font-size: 1.2rem;
		top: -15px;
	}
}

.post-single > .post-wrap {
	.thumbnail-caption {
		bottom: 2.2rem;
	}

	.post-media+.post-details, .post-media-carousel+.post-details {
		// padding-top: 4rem;
	}

	.post-details {
		padding-bottom: 0;
	}

	.post-meta {
		margin-bottom: 6px;
	}
	.post-cats {
		margin-bottom: 2rem;
	}
	.post-title {
		margin-bottom: 2.5rem;
		white-space: normal;
		font-size: font-size( 3.4rem );
		line-height: 1.5;
	}
	// Post Footer
	.post-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
	.post-tags, .social-icons {
		margin-top: 5rem;
	}
	.social-icons label {
		margin-#{$right}: 2rem;
	}
	.post-tags label {
		margin-#{$right}: 1rem;
	}
	.post-tags > a {
		display: inline-block;
		margin: side-values(5px 10px 5px 0);
		padding: 6px 13px;
		font-size: font-size( 1.2rem );
		border: 1px solid #ccc;
		color: #666;
		line-height: 1.35;
		transition: color .4s, border .4s;

		&:hover,
		&:focus {
			color: var(--rio-primary-color, #27c);
			border-color: var(--rio-primary-color, #27c);
		}
	}
}

.post-single .related-posts .post-title {
	font-weight: 600;
}

.post-single {
	// Post Author Detail
	.post-author-detail {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: flex-start;
		margin-top: 6rem;
		padding: 3rem;
		border: 1px solid #e1e1e1;

		.author-avatar img {
			border-radius: 0;
		}
	}
	.author-avatar {
		max-width: 8rem;
		flex: 0 0 8rem;
		margin-#{$right}: 1.8rem;

		img {
			display: block;
			width: 100%;
			background: #ebebeb;
		}
	}

	.author-body {
		flex: 1;
	}
	.author-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		margin: .2rem 0 1.2rem;
		.author-title {
			font-size: font-size( 1.3rem );
		}
		.author-name {
			margin-bottom: 0;
			font-size: font-size( 1.8rem );
			font-weight: 700;
			color: var(--rio-primary-color);
		}
		.author-link {
			display: inline-block;
			margin: 1.2rem 0 0.6rem;
			font-size: font-size( 1.3rem );
			font-weight: 600;
			letter-spacing: -0.025em;
			color: var(--rio-secondary-color);

			i {
				font-size: font-size(1.5rem);
				margin-#{$left}: 5px;
			}

			&:hover {
				color: #222;
			}
			@include if-rtl {
				i:before {
					content: "\e97e";
				}
			}
		}
	}
	
	.post-content {
		&::after {
			content: '';
			display: block;
			visibility: hidden;
			clear: both;
			zoom: 1;
			height: 0;
		}
	}

	blockquote p {
		margin-bottom: 0;
	}

	.post-media-carousel .owl-dots {
		bottom: 4.5rem;
	}

	.title {
		font-size: font-size(2.1rem);
	}
}
@supports (-moz-appearance: none) {
	.post-single .author-avatar img {
		max-width: calc(100% + 2px);
		width: calc(100% + 2px);
		height: calc(100% + 2px);
		margin: -1px;
	}
}
// Navigation
.post-navigation .nav-links {
	position: relative;
	display: flex;
	padding-top: 4.5rem;
	padding-bottom: 4.5rem;
	align-items: center;
	width: 100%;

	> * {
		flex: 0 0 50%;
		max-width: 50%;
	}
}
.post-navigation {
	border-bottom: 1px solid #e1e1e1;
	border-top: 1px solid #e1e1e1;
	margin-top: 5rem;

	a {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		flex: 0 0 100%;
		max-width: 100%;
		width: 100%;
		font-weight: 400;
		padding-top: 1.5rem;
		padding-bottom: 1.5rem;
		font-size: font-size( 1.4rem );
		text-transform: uppercase;
		line-height: 1.5;
		color: #999;
		transition: all .35s ease;
	}
	.pager-link-title {
		position: relative;

		&::after {
			content: '';
			position: absolute;
			left: 0;
			bottom: 0;
			display: inline-block;
			width: 100%;
			height: 2px;
			background: #333;
			transform: scale(0);
			transition: transform .3s;
		}
	}
	i {
		display: block;
		font-size: 2.5rem;
		font-weight: 400;
		line-height: 1;
		position: absolute;
		top: 50%;
		transition: all .35s ease .05s;
		transform: translateY(-50%);
	}
	.nav-previous a {
		padding-#{$right}: 3rem;
		padding-#{$left}: 4.2rem;
		text-align: $left;

		i {
			#{$left}: 2px;
		}
	}
	.nav-next:first-child {
		width: 50%;
		margin-#{$left}: auto;
	}
	.nav-next a {
		padding-#{$right}: 4.2rem;
		padding-#{$left}: 3rem;
		align-items: flex-end;
		text-align: $right;

		i {
			#{$right}: 2px;
		}
	}
	a:hover,
	a:focus {
		.pager-link-title::after {
			transform: scale(1);
		}
	}

	@include if-rtl {
		.nav-previous i:before {
			content: "\e97f";
		}
		.nav-next i:before {
			content: "\e97e";
		}
	}
}
.pager-link-title {
	display: inline-block;
	flex: 0 0 auto;
	color: #222;
	margin-top: 2px;
	font-size: font-size( 1.5rem );
	font-weight: 400;
	text-transform: none;
	transition: all .35s ease;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 700;
}
@include mq(sm, max) {
	.post-single .author-avatar {
		margin-#{$right}: 1.5rem;
	}
	.post-navigation .nav-links span {
		display: none;
	}

	.post-navigation .nav-next {
		border-#{$left}: none;
	}
}
@include mq(xs, max) {
	.post-navigation .nav-previous a {
		padding-left: 3.5rem;
		padding-right: 0;
	}
	.post-navigation .nav-next a {
		padding-left: 0;
		padding-right: 3.5rem;
	}
}
@include mq('480px', 'max') {
	.post-single .post-author-detail {
		padding: 2rem;
	}
	.post-single .author-avatar {
		max-width: 5rem;
		flex: 0 0 5rem;
		height: 5rem;
	}
}
// Related Post
.related-posts {
	margin-bottom: 1rem;
	padding-top: 7rem;
	padding-bottom: 4.5rem;
	&:not(:last-child) {
		border-bottom: 1px solid #e1e1e1;
	}

	.post-details {
		padding-bottom: 1rem;
	}
}
// Comments
.single-post {
	.main {
		padding-bottom: 10rem;
	}

	.comments {
		padding-top: 6rem;

		.comment-respond {
			margin: 0 0 4.5rem;
		}
	}
	.comment-respond {
		margin: 4.5rem 0 0;
	}
}

// no comments
.no-comments {
	margin: 2.5rem 0 1rem;
	padding-top: 2rem;
	border-top: 1px solid #e1e1e1;
	text-align: $right;
	color: #999;
}

@include mq(xs, max) {
	.post-single .author-header .author-link {
		font-size: font-size(1.2rem);
	}
	.post-single>.post-wrap .post-title {
		font-size: font-size(2rem);
	}
}