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

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

	&Icon {
		display: flex;
		align-items: center;
		justify-content: center;

		> div {
			position: relative;
			border-radius: var( --border-radius--small );
			transition: inherit;

			&:first-child {
				top: 0.3125rem;
				/* @noflip */
				left: 0.75rem;
				height: 0.5rem;
				transform: rotate( -45deg );
			}

			&:nth-child( 2 ) {
				width: 0.625rem;
				height: 0.625rem;
				border: 0.125rem solid #000;
				margin-top: -0.3125rem;
				/* @noflip */
				margin-left: -0.125rem;
				border-radius: 100%;
				transform: rotate( -45deg );
			}

			&:last-child {
				left: -0.4375rem;
				height: 1rem;
				opacity: 0;
				transform: rotate( -135deg );
			}

			&:first-child,
			&:last-child {
				width: 0.125rem;
				background-color: #000;
			}
		}
	}

	&:hover {
		> .citizen-search__buttonIcon {
			> div {
				&:first-child {
					height: 0.375rem;
					transform: translate3d( 0.125rem, 0.125rem, 0 ) rotate( -45deg );
				}
			}
		}
	}
}

/* @noflip */
.rtl {
	.citizen-search__buttonIcon {
		> div {
			&:first-child {
				left: 0.125rem;
			}

			&:nth-child( 2 ) {
				margin-left: -0.25rem;
			}
		}
	}
}

// Checkbox hack
#citizen-search__checkbox:checked {
	// Transform the magnifying glass button into a crossmark
	~ .citizen-search__button {
		> .citizen-search__buttonIcon {
			> div {
				&:first-child {
					height: 1rem;
					transform: translate3d( -0.3125rem, -0.3125rem, 0 ) rotate( 135deg );
				}

				&:nth-child( 2 ) {
					border-color: transparent;
				}

				&:last-child {
					opacity: 1;
				}
			}
		}

		&:hover {
			> .citizen-search__buttonIcon {
				transform: scale( 0.8 );
			}
		}
	}
}