:root {
	--arrow-down: url(data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIGZpbGw9Im5vbmUiPjxwYXRoIGQ9Ik0xNS45MyAyMGEuOC44IDAgMCAwLS41NjYgMS4zNjZsOC4wNyA4LjA3YS44LjggMCAwIDAgMS4xMzEgMGw4LjA3LTguMDdBLjguOCAwIDAgMCAzMi4wNjkgMjBIMTUuOTN6IiBmaWxsPSIjMWExYTFhIi8+PC9zdmc+Cg==);
	--arrow-up: url(data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIGZpbGw9Im5vbmUiPgogIDxwYXRoIGQ9Ik0xNS45MyAyOGEuOC44IDAgMCAxIC41NjYtMS4zNjZsOC4wNy04LjA3YS44LjggMCAwIDEgMS4xMzEgMGw4LjA3IDguMDdBLjguOCAwIDAgMSAzMi4wNjkgMjhIMTUuOTN6IiBmaWxsPSIjMWExYTFhIi8+Cjwvc3ZnPgo=);
	--arrow-down-white: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTE1LjkzIDIwYS44LjggMCAwIDAtLjU2NiAxLjM2Nmw4LjA3IDguMDdhLjguODAgMCAwIDAgMS4xMzEgMGw4LjA3LTguMDdBLjguODAgMCAwIDAgMzIuMDY5IDIwSDE1LjkzeiIgZmlsbD0iI2ZmZmZmZiIvPjwvc3ZnPg==);
	--arrow-up-white: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTE1LjkzIDI4YS44LjggMCAwIDEgLjU2Ni0xLjM2Nmw4LjA3LTguMDdhLjguODAgMCAwIDEgMS4xMzEgMGw4LjA3IDguMDdBLjguODAgMCAwIDEgMzIuMDY5IDI4SDE1LjkzeiIgZmlsbD0iI2ZmZmZmZiIvPjwvc3ZnPg==);
}

.updates-filter {
	margin-bottom: 0;
}

@media (min-width: 73rem) {
	.updates-filter {
		margin-bottom: 3rem;
	}
}

.updates-filter__main {
	cursor: pointer;
	font-family: var(--text-raleway);
	font-weight: 700;
	user-select: none;
	position: relative;
	& > summary {
		padding: .5rem 0 .5rem 1rem;
		border: .125rem solid;
		border-radius: .25rem;
	}
	& > ul {
		position: absolute;
	    right: 0;
	    width: 100%;
	    z-index: 1;
	    background: var(--color-white);
	    padding: 0;
	    margin: 0;
	    border-top: 1px solid var(--color-greyscale-20);
		border-left: 1px solid var(--color-greyscale-20);
		border-right: 1px solid var(--color-greyscale-20);
		& ul {
			margin: 0 -1rem;
			overflow-x: auto;
		}
	}
	& summary {
		list-style: none;
		background-image: var(--arrow-down);
	    background-position: right .5rem center;
	    background-repeat: no-repeat;
	    background-size: 2rem;
	    &:focus-visible {
	    	outline: .125rem solid var(--color-link-focus);
	    }
	}
	& summary::-webkit-details-marker {
	  display: none; /* Removes the indicator in Safari */
	}
	& li {
		list-style: none;
		padding: 0;
		border-bottom: 1px solid var(--color-greyscale-20);
		max-width: none;
		&:has(details) {
			overflow: hidden;
		}
		& li {
			font-weight: 500;
			border: 0 solid transparent;
			&:first-child a:focus {
				padding-top: .25rem;
				margin-top: .25rem;
			}
		}
		& a:focus {
		    box-shadow: 0 -4px 0 #009adb, 0 4px 0 #009adb;
		}
	}
	& li:last-child {
		padding-bottom: .25rem;
	}
	&:not([open]) .updates-filter__message-open {
	  display: none;
	}

	&[open] .updates-filter__message-closed {
	  display: none;
	}
	& details {
		padding: .5rem 1rem .25rem;
	}
	/*	oh so this shit just doesn't work */
	& details:not(:has(li:hover)), li:not(:has(details)) {
		&:hover {
			color: var(--color-white);
			background-color: var(--color-grey-but-somehow-different);
		}
	}
	& li:not(:has(details)) {
		&:hover {
			& a {
				color: var(--color-white);
				background-color: var(--color-grey-but-somehow-different);
			}
		}
	}
	& ul[data-taxonomy] li.no-link:hover {
		color: var(--color-grey-but-somehow-different);
		background-color: #dedede;
		cursor: default;
	}
	&[open] {
		& summary {
			background-image: var(--arrow-up);
			margin-bottom: 1px;
		}
		& details {
			& summary {
				background-position: right -.5rem center;
				background-image: var(--arrow-down);
			}
			&:hover {
				& li {
					background-color: var(--color-white);
					color: var(--color-text);
					&:hover {
						background-color: var(--color-grey-but-somehow-different);
						color: var(--color-white);
					}
				}
				& summary {
					background-image: var(--arrow-down-white);
				}
			}
			&[open] {
				margin-bottom: -.25rem;
				& li:last-child {
					padding-bottom: .5rem;
				}
				& summary {
					background-image: var(--arrow-up);
				}
				&:not(:has(li:hover)):hover summary {
					background-image: var(--arrow-up-white);
				}
			}
		}
	}
	& a {
		color: var(--color-text);
		text-decoration: none;
		padding: .5rem 1rem .25rem;
		display: inline-block;
		width: 100%;
	}
	& .no-link {
		color: var(--color-grey-but-somehow-different);
		background-color: #dedede;
		& span {
			padding: .5rem 1rem .25rem;
			display: inline-block;
			width: 100%;
		}
	}
}

@media (min-width: 73rem) {
	.updates-filter__main {
		& > ul {
		    width: fit-content;		
		    text-wrap: nowrap;
		}
	}
}