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

.citizen-drawer__button {
	position: relative; // prevent overlap by drawer

	&Icon {
		display: grid;
		place-content: center;
		transition: @transition-transform, @transition-background, @transition-opacity;

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

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

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

	&:hover {
		> .citizen-drawer__buttonIcon {
			> div {
				background-color: var( --background-color-icon--hover );

				&:first-child {
					transform: translate3d( -50%, 0, 0 );
				}
			}
		}
	}

	&:active {
		> .citizen-drawer__buttonIcon {
			> div {
				background-color: var( --background-color-icon--active );
			}
		}
	}
}

// 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 {
		.citizen-drawer__button {
			&Icon {
				> 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 );
				}
			}
		}
	}
}