h3 {
	text-align:center;
	font-size:1rem;
	font-weight:normal;
	margin-bottom:.8em;
	opacity:.8;
}

section {
	height: calc-size(max-content, size);;
	transition:all .25s;
	overflow:hidden;

	padding-bottom:10px;
	padding:9px;

	&.--main {
		padding-left:0;
		padding-right:0;
	}


	&:has(.tagfilter:empty) {
		height:0px;
		padding-top:0;
		padding-bottom:0;
		border-width:0 !important;
	}
}

.picker {
	display:flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;

	#vehicles {
		flex-grow:1;

		padding:.2em .8em .2em 0;
	}
	#vehicle-parts {
		border-left:1px solid #444;
		padding:.2em 0 .2em .8em;
		width:100%;
	}

	#vehicle-parts:empty {
		display:none;
	}
}

.tagfilter {
/*	display: grid;
    grid-gap: .5em;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    grid-auto-rows: minmax(90px, 1fr);*/

	display:flex;
	flex-wrap:wrap;
	justify-content: center;
	gap:.3em;

	&.--main {
		flex-wrap:nowrap;

		.tagfilter-button {
			background-size:200%;
			height:100px;

			.tfb-title {
				padding: 3px;
				padding-bottom:2px;
				background-color:#000;
			}
		}

		.--selected {
			.tfb-title {
				background-color:#005544;
			}

			&:after {
				content: "";
				clip-path: path("M0,0H80A0,0 0,0,1 80,0V0A10,10 0,0,0 90,10H90A0,0 0,0,1 90,10V10A0,0 0,0,1 90,10H0A0,0 0,0,1 0,10V10A0,0 0,0,1 0,10H0A10,10 0,0,0 10,0V0A0,0 0,0,1 10,0");
		position:absolute;
				left:-12px;right:-10px;
				bottom:-11px;
				height:10px;
				background-color:#00c9b2;
			}
		}
	}
}

.tagfilter-button {
	width:70px;
	height:80px;
	padding:3px;
	background-color:#222;
	background-size:96%;
	background-repeat:no-repeat;
	background-position: center center;

	cursor:pointer;
	display:inline-block;
	font-size:65%;
	position:relative;
	border:2px solid #666;

	&.--selected {
		border-color:#00c9b2;
		background-color:#00c9b244;
		position:relative;

	}
	&.--empty {
		opacity:1;
	}

	img {
		width:50px;
	}
	.tfb-title {
		position:absolute;
		bottom:0;
		left:0;right:0;
		text-align:center;
	}
}



.taglist-hide-empty {
	.--empty {
		display:none;
	}
}


h2 {
	font-weight:normal;
	margin-bottom:.5em;
}

.article {

	margin-bottom:.8em;

	.article-tags {
		margin-top:.5em;

		display:flex;
		flex-wrap: wrap;
		font-size:70%;
		gap:.3em;
		color:#bbb;

		.tag {
			padding:.2em .4em;
			background-color:#333;
		}
	}

}