.citizen-dropdown {
	&-summary {
		cursor: pointer;

		// Icons have to use span inside label elements
		> span:not( .citizen-ui-icon ) {
			.sr-only;
		}

		&:hover {
			background-color: var( --background-color-button-quiet--hover );

			> .citizen-ui-icon::before {
				opacity: var( --opacity-icon-base--hover );
			}
		}

		&:active {
			background-color: var( --background-color-button-quiet--active );

			> .citizen-ui-icon::before {
				opacity: var( --opacity-icon-base--selected );
			}
		}

		// Remove Safari summary marker
		&::-webkit-details-marker {
			display: none;
		}

		// Reset hover styles if it is a touch device
		// This is dumb but hover:hover overrides active states
		@media ( hover: none ) {
			&:hover {
				background-color: transparent;

				.citizen-ui-icon::before {
					opacity: var( --opacity-icon-base );
				}
			}
		}
	}

	&-details {
		&[ open ] {
			+ .citizen-menu__card {
				transition: var( --transition-menu );
				transition-property: transform;
				transform: none;

				> * {
					opacity: 1;
					transition: var( --transition-menu );
					transition-delay: var( --transition-delay-menu );
					transition-property: opacity;
				}
			}

			> .citizen-dropdown-summary {
				/* Make button visible above backdrop */
				position: relative;
				z-index: 1;
				background-color: var( --background-color-button-quiet--active );

				&:hover {
					background-color: var( --background-color-button-quiet--hover );
				}
			}
		}
	}

	@media ( max-width: @max-width-breakpoint-tablet ) {
		&-details {
			// Dismiss affordnance overlay
			&::before {
				z-index: -1;
				content: '';
				background: var( --background-color-backdrop-light );
				backdrop-filter: blur( 2px );
				opacity: 0;
			}

			&[ open ]::before {
				position: fixed;
				inset: 0;
				z-index: 0; // Needed for menu to work in Safari
				opacity: 1;
				transition: var( --transition-menu );
				transition-property: opacity;
			}
		}
	}
}

@media ( max-width: @max-width-breakpoint-tablet ) {
	/* HACK: Disable page from scolling when a dropdown menu is opened */
	body:has( .citizen-dropdown-details[ open ] ) {
		overflow: hidden;
	}
}