@use '../../utils' as *;

/*----------------------------------------*/
/*  Postbox styles
/*----------------------------------------*/

// Postbox contents 
.postbox-big-thumb img {
	width: 100%;
	border-radius: 16px;
	background: linear-gradient(127.27deg, rgb(81, 255, 194) 0%, rgb(164, 202, 214) 23.9204838872%, rgb(255, 143, 236) 50%, rgb(69, 72, 255) 100%);
	padding: 1px;
}

.postbox-contents {
	h3 {
		font-size: 28px;
		margin-bottom: 16px;

		@media #{$md,$lg} {
			font-size: 24px;
		}

		@media #{$xs,$sm} {
			font-size: 20px;
		}
	}

	span {
		color: rgba($white, $alpha: 0.7);
	}

	p {
		margin-bottom: 45px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	img {
		@include border-radius(16px);
		margin-bottom: 45px;
	}

	ul {
		list-style-type: disc;
		padding-left: 28px;
		margin-bottom: 16px;
		margin-top: 20px;

		li {
			margin-bottom: 16px;
			color: rgba($white, $alpha: 0.5);
			font-family: "Urbanist-SemiBold", sans-serif;
			font-size: 16px;
			line-height: 26px;
			font-weight: 500;
		}
	}
}

// Search input
.keyword-search-form {
	position: relative;

	input {
		padding-right: 45px;
	}

	.search-btn {
		position: absolute;
		right: 15px;
		top: 50%;
		transform: translateY(-50%);

		svg * {
			stroke: rgba($white, $alpha: 0.6);
		}
	}
}

// Recent post css
.rc-post {
	padding: 12px;
	padding-inline-end: 35px;
	background-color: var(--td-white);
	@include box-shadow(0px 1px 3px rgba(3, 4, 28, 0.06));
	margin-bottom: 6px;
	border: 1px solid var(--td-border-primary);
	@include border-radius(6px);

	&:hover {
		& .rc-post-thumb img {
			@include transform(scale(1.1));
		}
	}

	&:last-child {
		margin-bottom: 0;
	}
}

.rc-post-item {
	background: #060608;
	border-radius: 12px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
	justify-content: flex-start;
	position: relative;
	z-index: 1;
	transition: .3s;

	&:not(:last-child) {
		margin-bottom: 24px;
	}

	&::before {
		position: absolute;
		content: "";
		inset: 0;
		@include border-radius(12px);
		padding: 1px;
		background: linear-gradient(95.42deg, $primary 0%, $primary-alt 100%);
		-webkit-mask: linear-gradient(var(--td-white) 0 0) content-box, linear-gradient(var(--td-white) 0 0);
		-webkit-mask-composite: xor;
		mask-composite: exclude;
		z-index: -1;
		transition: .3s;
		opacity: 0.2;
	}

	&:hover {
		&::before {
			opacity: 1;
		}
	}
}

.rc-post-meta {
	display: flex;
	flex-direction: row;
	gap: 10px;
	align-items: center;
	justify-content: flex-start;
	flex-shrink: 0;
	position: relative;

	.article {
		background: var(--blue, linear-gradient(95.42deg, $primary 0%, $primary-alt 100%));
		border-radius: 4px;
		padding: 10px;
		display: flex;
		flex-direction: row;
		gap: 10px;
		align-items: center;
		justify-content: center;
		height: 26px;
	}

	.meta-info {
		span {
			color: rgba($white, $alpha: 0.6);
			font-size: 12px;
			font-weight: 500;

			&:not(:first-child) {
				position: relative;
				padding-left: 10px;

				&::before {
					position: absolute;
					content: "";
					left: 2px;
					top: 50%;
					transform: translateY(-50%);
					width: 2px;
					height: 2px;
					background: rgba($white, $alpha: 0.2);
				}
			}
		}
	}
}

.rc-post-content {
	.description {
		font-size: 14px;
	}
}

.rc-post-title {
	font-size: 16px;
	overflow: hidden;
	-webkit-line-clamp: 2;
	display: box;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	white-space: normal;
	margin-bottom: 6px;

	& a {
		&:hover {
			color: var(--td-primary);
		}
	}
}

.rc-post-thumb {
	overflow: hidden;
	margin-inline-end: 25px;
	flex: 0 0 auto;
	@include border-radius(4px);

	& img {
		width: 90px;
		height: 90px;
		object-fit: cover;
	}
}

// sidebar-widget 
.sidebar-main-wrapper {
	padding-left: 40px;

	@media #{$xs,$sm,$md,$lg} {
		padding-left: 0;
	}

	@media #{$xs,$sm,$md} {
		padding-inline-start: 0;
	}

}

.sidebar-widget-title {
	display: block;
	font-weight: 500;
	font-size: 20px;
	margin-bottom: 25px;
	border-bottom: 1px solid rgba($white, $alpha: 0.2);
	padding-bottom: 14px;
}

.sidebar-widget {
	ul {
		li {
			list-style: none;
			font-weight: 500;
			font-size: 12px;
			margin-bottom: 6px;

			a {
				font-weight: 500;
				font-size: 16px;
				position: relative;
				background: var(--td-white);
				@include box-shadow(0px 1px 3px rgba(3, 4, 28, 0.06));
				display: block;
				padding: 12px 14px;
				@include border-radius(6px);

				span {
					float: right;
					font-weight: 500;
					font-size: 12px;
					display: inline-block;
					line-height: 1;
					padding: 4px 11px 5px;
					border: 1px solid #EAEAEF;
					@include border-radius(20px);
					margin-top: 2px;
				}
			}
		}
	}
}