#toggle {
	margin: 20px;
	box-shadow: var(--shadow-bottom);
}
#toggle > .toggle-heading {
	padding: 5px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
#toggle > div > span {
	cursor: pointer;
	color: var(--text);
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
}
.toggle-heading > span:after {
	content: "";
	width: 1.2rem;
	height: 1.2rem;
	background-color: currentColor;
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><path fill='currentColor' d='M297.4 438.6C309.9 451.1 330.2 451.1 342.7 438.6L502.7 278.6C515.2 266.1 515.2 245.8 502.7 233.3C490.2 220.8 469.9 220.8 457.4 233.3L320 370.7L182.6 233.4C170.1 220.9 149.8 220.9 137.3 233.4C124.8 245.9 124.8 266.2 137.3 278.7L297.3 438.7z'/></svg>");
	transition: transform 0.2s linear;
}
#toggle.open .toggle-heading > span:after {
	transform: rotate(-180deg);
}
.tags {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	width: 100%;
	margin: 0 auto;
	background: var(--white);
	border: 1px solid var(--border-color);
	border-radius: var(--radius);
	overflow: hidden;
	transition: height 0.2s linear, padding 0.2s linear;
	will-change: height;
}
.toggle.open .tags {
	padding: 15px 5px;
}
#toggle:has(.toggle-heading) .tags {
	border-top: 2px solid var(--brand);
}
.tags > a {
	padding: 0 10px;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--text);
	background: var(--bg);
	border-radius: var(--radius) 0 0 var(--radius);
	line-height: 2.5;
	margin: 5px 30px 5px 0px;
	position: relative;
	border: 1px solid var(--border-color);
}
.tags > a:hover {
	box-shadow: var(--shadow-all-small);
}
.tags img {
	display: none;
}
.tags span {
	position: absolute;
	top: 0px;
	left: 99%;
	z-index: 2;
	overflow: hidden;
	max-width: 0;
	padding-right: 3px;
	color: var(--brand);
	background: var(--brand);
	display: flex;
	justify-content: center;
	box-shadow: var(--shadow-all-small);
	border-radius: 0 var(--radius) var(--radius) 0;
	transition: color 0.2s linear, padding 0.2s linear, max-width 0.2s linear;
}
.tags > a:hover span {
	color: var(--white);
	padding: 0 6px;
	max-width: max-content;
}
@media only screen and (max-width: 767.98px) {
	.tags > a {
		font-size: 0px;
		line-height: 0;
		box-shadow: none;
		background: none;
		margin: 5px;
		padding: 5px;
		border: 1px solid transparent;
		border-radius: var(--radius);
	}
	.tags > a:hover {
		border: 1px solid var(--brand);
		border-radius: var(--radius);
	}
	.tags img {
		display: flex;
	}
	.tags span {
		display: none !important;
	}
}