main > div:has(> aside + dialog + section) > aside:has(> div > label input[type="checkbox"]) > div > label {
    width: auto;
    padding: unset;
}

@media only screen and (max-width: 1000px) {

	main > div:has(> aside + dialog + section) > aside:has(> div > label input[type="checkbox"]) {        
		position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: auto;
        min-width: unset;
        height: auto;
        transition: top 500ms ease-in-out;
        cursor: default;
        overflow: hidden;
        z-index: 8;
	}

	main > div:has(> aside + dialog + section) > aside:has(> div > label input[type="checkbox"]:checked) {
		height: 100%;
		width: 100%;
		padding: unset;
		border-radius: var(--borderRadius);
		backdrop-filter: blur(0);
		-webkit-backdrop-filter: blur(0);
		animation: backdrop 1750ms ease-in forwards;
	}

	main > div:has(> aside + dialog + section) > aside:not([data-state="initiating"]):has(> div > label input[type="checkbox"]) > div {
		width: auto;
		height: 100%;
		max-height: unset;
		padding: unset;
		box-shadow: none;
		background-color: transparent;
	}

	main > div:has(> aside + dialog + section) > aside:has(> div > label input[type="checkbox"]) > div:has(> label input:checked) {
		width: 100%;
		background-color: oklch(from var(--contrastOverlayColor) l c h / 0.50);
		transition: background-color ease-in 1750ms;
	}

	main > div:has(> aside + dialog + section) > aside:has(> div > label input[type="checkbox"]) > div > :is(label:has(> input[type="checkbox"]), form) {
		opacity: 1;
		animation: none;
	}

	/* Header */
	main > div:has(> aside + dialog + section) > aside:has(> div > label input[type="checkbox"]) > div > label:has(input) {
		justify-content: center;
		width: auto;
		min-width: 200px;
		height: 1.5em;
		margin-top: 0;
		padding: unset;
		box-shadow: none;
		transition: width 500ms ease-in-out, letter-spacing 500ms ease-in-out, box-shadow 500ms ease-in-out;
	}
	
	main > div:has(> aside + dialog + section) > aside:has(> div > label input[type="checkbox"]) > div > label:has(input:checked) {       
		width: 100%;
		margin: unset;
		letter-spacing: var(--smallSpacing);
		animation: FiltersHeaderShowAnimation 500ms ease-in 500ms forwards;
	}
	@keyframes FiltersHeaderShowAnimation {

		from {
			box-shadow: none;
		}

		to {
			box-shadow: var(--boxShadow_elevated);
		}

	}
	
	main > div:has(> aside + dialog + section) > aside:has(> div > label input[type="checkbox"]) > div > label:has(input):after {
		content: "\F0415"; /* mdi-plus */
	}
	
	main > div:has(> aside + dialog + section) > aside:has(> div > label input[type="checkbox"]) > div > label:has(input:checked):after {
		content: "\F0374"; /* mdi-minus */
	}
	
	main > div:has(> aside + dialog + section) > aside:has(> div > label input[type="checkbox"]) form {
		display: none;
		margin: auto 0 0;
		padding: var(--mediumSpacing) 1vh;
		transform: translateY(100%);
		background-color: var(--contrastColor);
		cursor: default;
		transition: all 500ms ease-out 250ms;
	}

	main > div:has(> aside + dialog + section) > aside:has(> div > label input[type="checkbox"]) > div > label:has(input:checked) ~ form {
		display: flex;
		max-height: unset;
		transform: translateY(100%);
		animation: MobileFiltersShowAnimation 1000ms ease-in-out forwards;
	}
	@keyframes MobileFiltersShowAnimation {

		from {
			transform: translateY(100%);
		}

		to {
			transform: translateY(0);
		}

	}
	
}