/**
 * Microinteractions for icons
 * TODO: Look into animating the SVG directly
 */
:is( a,
button,
summary ) {
	.citizen-ui-icon {
		transition: var( --transition-hover );
		transition-property: transform;

		&.mw-ui-icon-wikimedia-configure {
			// HACK: Manually rotate the configure icon to create an illusion
			// that the sliders are being moved.
			transition: none;
		}
	}

	@media ( hover: hover ) {
		&:hover {
			.citizen-ui-icon {
				&.mw-ui-icon-wikimedia-configure {
					transform: rotate( 180deg );
				}

				// Move pen to the right like drawing a line
				// TODO: Perhaps we can add a line somehow through CSS
				&.mw-ui-icon-wikimedia-edit {
					transform: translateX( 2px );
				}

				// Spin anti-clockwise like a door handle, to open a vertical menu
				&.mw-ui-icon-wikimedia-ellipsis {
					transform: rotate( -90deg );
				}

				// Move up
				&.mw-ui-icon-wikimedia-arrowUp,
				&.mw-ui-icon-wikimedia-speechBubbles,
				&.mw-ui-icon-wikimedia-userAdd {
					transform: translateY( -2px );
				}

				// Spin anti-clockwise and get the arrow to point backward
				&.mw-ui-icon-wikimedia-history {
					transform: rotate( -270deg );
				}

				// Move towards where the arrow is pointing
				&.mw-ui-icon-wikimedia-logIn,
				&.mw-ui-icon-wikimedia-share {
					transform: translateX( 2px );
				}
			}
		}
	}
}

.citizen-header__logo {
	.mw-logo-icon,
	.citizen-ui-icon {
		transform-origin: center center;
		transition-timing-function: var( --transition-timing-function-ease );
		transition-duration: var( --transition-duration-base );
		transition-property: color, transform, opacity;
	}

	.citizen-header__button {
		color: transparent;

		&:hover {
			color: var( --color-base );

			.mw-logo-icon {
				opacity: 0;
			}

			.mw-logo-icon,
			.citizen-ui-icon {
				transform: rotate( 360deg );
				transition-duration: var( --transition-duration-medium );
			}
		}
	}
}