mediawiki-skins-Citizen/resources/skins.citizen.styles/components/Menu.less

.citizen-menu {
	font-size: var( --font-size-small );

	&__card {
		--transform-origin-offset-start: var( --space-xs );
		--transform-origin-offset-end: ~'calc( 100% - var( --space-xs ) )';
		margin: var( --space-xs );
		overflow: auto;
		overscroll-behavior: contain;
		user-select: none;
		background-color: var( --color-surface-1 );
		border: 1px solid var( --border-color-base );
		border-radius: var( --border-radius--medium );
		box-shadow: var( --box-shadow-dialog );
		transform: scale( 0 );
		will-change: transform;
		contain: content;

		> * {
			opacity: 0;
			will-change: opacity;
		}

		.citizen-menu-checkbox-checkbox:checked ~ & {
			z-index: @z-index-overlay;
			transition: var( --transition-menu );
			transition-property: transform;
			transform: none;

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

	&__dropdown {
		&Button {
			cursor: pointer;

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

			// Icons have to use span inside label elements
			> span:not( .citizen-ui-icon ) {
				.mixin-screen-reader-text;
			}

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

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

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

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

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

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

		&[ open ] {
			z-index: @z-index-overlay;

			> .citizen-menu__card {
				transition: var( --transition-menu );
				transition-property: transform;
				transform: none;

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

			> .citizen-menu__dropdownButton {
				background-color: var( --background-color-quiet--active );

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

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

			&[ open ]::before {
				position: fixed;
				inset: 0;
				opacity: 1;
				transition: var( --transition-menu );
				transition-property: opacity;
			}
		}
	}

	&__heading {
		display: block;
		padding: var( --space-xs ) var( --space-md );
		margin: 0;
		font-size: var( --font-size-x-small );
		font-weight: var( --font-weight-normal );
		color: var( --color-base--subtle );
		letter-spacing: 0.05em;
	}

	&__content-list {
		margin: 0;
		list-style: none;
	}

	.mw-list-item {
		line-height: var( --line-height-xs );

		a {
			display: flex;
			gap: var( --space-sm );
			align-items: center;
			padding: var( --space-xs ) var( --space-md );
			font-weight: var( --font-weight-medium );
			color: var( --color-base );
			transition: var( --transition-hover );
			transition-property: opacity;

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

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

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

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

			&:hover,
			&:focus {
				text-decoration: none;
			}
		}
	}
}

// FIXME: This should not be here
.citizen-ui-icon {
	display: block;
	width: var( --size-icon );
	height: var( --size-icon );
	contain: strict;

	&::before {
		display: block;
		width: 100%;
		height: 100%;
		content: '';
		filter: var( --filter-invert );
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		opacity: var( --opacity-icon-base );
	}
}

/**
 * Invisible checkbox covering the menu button.
 */
.citizen-menu-checkbox {
	// Has to be visible to be focusable
	&-checkbox {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		width: 0;
		height: 0;
		padding: 0;
		margin: 0;
		opacity: 0;

		// HACK: Fake focus styles
		&:focus {
			& + .citizen-header__button,
			& + .citizen-menu-checkbox-button {
				outline: 2px solid var( --color-primary );
				outline-offset: 1px;
			}
		}
	}

	&-button {
		cursor: pointer;

		// Icons have to use span inside label elements
		> span:not( .citizen-ui-icon ) {
			.mixin-screen-reader-text;
		}
	}
}

.mw-portlet {
	// Hide selected item
	.selected {
		.mixin-screen-reader-text;
	}

	// Hide empty menu
	&-empty {
		display: none !important;
	}

	a::after {
		filter: var( --filter-invert );
	}
}