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

.citizen-drawer__button {
	position: relative; // To make background hover state visible

	&Icon {
		display: grid;
		place-content: center;

		> div {
			display: block;
			width: 1.125rem;
			height: 0.125rem;
			margin: 0.09375rem 0;
			background-color: #000;
			border-radius: var( --border-radius--large );
			transition: inherit;
			transform-origin: 0.25rem 0;

			&:first-child {
				transform-origin: 0 0;
			}

			&:nth-child( 2 ) {
				transform-origin: 0 100%;
			}
		}
	}

	&:hover {
		> .citizen-drawer__buttonIcon {
			> div {
				&:first-child {
					transform: translate3d( -50%, 0, 0 );
				}
			}
		}
	}
}

// RTL
.rtl {
	.citizen-drawer__button:hover {
		&Icon {
			> div {
				&:first-child {
					transform: translate3d( 50%, 0, 0 );
				}
			}
		}
	}
}

// Checkbox hack
#citizen-drawer__checkbox:checked {
	// Transform all the slices of the button into a crossmark
	~ .citizen-drawer__button {
		background-color: var( --background-color-primary--active );

		> .citizen-drawer__buttonIcon {
			> div {
				&:first-child {
					opacity: 0;
					/* @noflip */
					transform: rotate( 0deg ) scale( 0.2, 0.2 );
				}
				// Reflect line
				&:nth-child( 2 ) {
					/* @noflip */
					transform: rotate( -45deg ) translate3d( -0.125rem, 0.375rem, 0 );
				}

				// Hide line
				&:last-child {
					/* @noflip */
					transform: rotate( 45deg ) translate3d( -0.3125rem, -0.4375rem, 0 );
				}
			}
		}

		&:hover {
			> .citizen-drawer__buttonIcon {
				transform: scale( 0.85 );
			}
		}
	}
}