main {
	padding: 1rem 5%;

	& h1 {
		color: var(--header-color);
		font-size: 4.5vmax;
	}

	& .controls--container {
		display: flex;
		/* justify-content: space-between; */
		justify-content: flex-end;
		padding: 2rem 0;

		& > ul {
			list-style: none;
			display: flex;
		}

		.field-group {
			position: relative;
			height: fit-content;
			width: 13rem;

			& > span {
				position: relative;
				cursor: pointer;
				display: block;
				width: 100%;
				padding: .5rem 2rem .5rem 1rem;
				border: 1px solid var(--body-color);

				& span#value {
					display: none;
				}


				& > span {
					transition: transform .25s;
					transform: none;
				}

				&:after {
					content: "﹀";
					position: absolute;
					right: 8%;
					top: 50%;
					transform: translateY(-30%);
				}
			}

			& ul {
				opacity: 0;
				position: absolute;
				height: 0;
				list-style: none;
				transform: scaleY(0);
				transition: transform .25s;
			}

			&.open, &.set{
				& > span > span:not(#value) {
					transform: translate(0, -165%);
					position: absolute;
					left: 0;
					display: inline-block;
				}

				& span#value {
					display: inline-block;
				}

			}

			&.open {
				& ul {
					opacity: 1;
					padding: 0;
					background: var(--grey-secondary);
					bottom: -1rem;
					left: 0;
					width: 100%;
					height: fit-content;
					transform: scaleY(1);
					box-sizing: border-box;
					translate: 0 100%;
					transform-origin: top;

					& li {
						padding: .5rem 1rem;

						&:hover {
							background: var(--primary);
							cursor: pointer;
						}
					}
				}
			}
		}
	}

	& > ul {
		list-style: none;

		& > li {
			border-bottom: 1px solid var(--grey-primary);
			padding: 1rem 0;

			& article {
				& a {
					text-decoration: none;
					color: inherit;

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

				& h1 {
					font-size: 2vmax;
					color: var(--header-color);
				}

				& time {
					font-style: italic;
					color: #6b7280;
					margin-bottom: .5rem;
					display: inline-block;
				}

				& .meta--container {
					display: flex;
					justify-content: space-between;
					align-items: center;

					& ul {
						display: flex;
						gap: 1rem;
						list-style: none;
						padding: 1rem 0;
					}

					& span {
						color: var(--header-color);
						display: flex;
						text-transform: uppercase;
						padding-top: 1rem;

						& svg {
							fill: var(--header-color);
							width: .75rem;
							margin-left: 1rem;
						}
					}
				}
			}

			&:first-of-type {
				padding-top: 0;
			}
		}
	}

	& ul > li.topic {
		background: var(--grey-primary);
		border-radius: .5rem;
		text-transform: uppercase;
		padding: .25rem .5rem;
		height: fit-content;
		color: var(--body-color);
		font-size: .75vmax;

		&.interactive:hover {
			background: var(--primary);
		}
	}
}

@media (min-width: 1080px) {
	main {
		padding: 2rem 10%;
	}
}