@import "../../assets/scss/variables";
#news {
	height: 100%;
	.filters-wrapper {
		height: 68px;

		.sorting {
			font-size: 1.2rem;
			border: none;
			color: $white;
			height: 41.73px;
			min-width: 189px;
			margin-right: 18.5px;
			background-color: $secondary-color;
			font-weight: $bold;
			position: relative;
			border-radius: 0.4rem;
			display: flex;
			align-items: center;
			padding: 0 1rem 0 1.4rem;
			cursor: pointer;
			&:hover {
				background-color: $hover_color;
			}
			justify-content: space-between;

			.reverse {
				transform: scaleY(-1);
			}

			span {
				white-space: nowrap;
			}
		}
		.select-category {
			height: 41.73px;
			width: 189px;
			.select-header {
				font-size: 1.2rem;
				border: none;
				color: $white;
				height: 41.73px;
				width: 189px;
				background-color: $secondary-color;
				font-weight: $bold;
				position: relative;
				border-radius: 0.4rem;
				display: flex;
				align-items: center;
				padding: 0 1rem 0 1.4rem;
				cursor: pointer;
				&:hover {
					background-color: $hover_color;
				}
				justify-content: space-between;

				.true {
					transform: rotatez(90deg);
				}

				span {
					font-size: 1.2rem;
					border: none;
					color: $white;

					font-weight: $bold;
				}
			}
			.options {
				position: relative;
				width: 189px;
				top: 0.3rem;
				margin-top: 0;
				border-radius: 0.4rem;
				border: 1.5px solid $category-support;
				padding: 3px 1rem 1rem 1rem;
				box-shadow: 0 3px 6px rgb(0 0 0 / 16%);
				background: white;
				z-index: 1;

				li {
					position: relative;
					padding: 1rem 0.6rem 0.6rem;
					font-size: 1.2rem;
					font-weight: $bold;
					cursor: pointer;
				}
				li:not(:first-child) {
					margin: 7px 0;
				}
				li:hover {
					background-color: $bg-form;
					color: $secondary-color;
				}
				li::after {
					position: absolute;
					width: 100%;
					margin: -1rem 0%;
					left: 0;
					bottom: 0.6rem;
					border-bottom: dashed 1px $category-support;
					content: "";
					display: block;
					z-index: 0;
				}
			}
		}
	}
	.posts-wrapper {
		min-height: 800px;
		max-width: 1023px;
		.news--wrapper {
			img{width:100px;}
			margin-bottom: 19px;
			.col {
				margin-bottom: 43px;

				@media (max-width: 1200px) {
					margin-bottom: 10rem;
				}
			}

			&--date {
				font-size: 14px;
				font-weight: $thin;
				letter-spacing: 0.28px;
				color: $secondary-color;
			}
			&--title {
				font-size: 20px;
				font-weight: $bold;
				letter-spacing: 0.4px;
				color: $main-color;
				margin-bottom: 11.6px;
			}
			&--labels {
				margin-bottom: 17.2px;
				span {
					text-transform: uppercase;
					color: $white;
					padding: 0.7rem 1.9rem;
					border-radius: 0.8rem;
					margin-right: 1.2rem;
					font-size: 1rem;




					&:empty {
						padding: 0;
						margin: 0;
					}
				}
			}
			&--content {
				span {
					p {
						font-size: 16px;
						font-weight: $light;
						letter-spacing: 0;
						padding-left: 2.1rem;
						color: $text-color;
					}
				}

				position: relative;
				&::before {
					content: "";
					color: $secondary-color;
					display: block;
					position: absolute;
					z-index: 1;
					left: 0;
					top: 6px;
					bottom: 0;
					border-style:solid;
					border-width: 0 0 0 4px;
					border-radius: 4px;
					height: 92%;
				}
				a {
					color: $secondary-color;
					text-decoration: underline;
				}
			}
		}

		.empty-cat {
			color: $main-color;
			font-weight: $thin;
		}
	}
	.pagination-wrapper {
		#pagination {
			padding-left: 0;
			margin-left: -15px;
		}
	}
}