.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;
				border-radius: 100%;
				margin-top: -0.3125rem;
				/* @noflip */
				margin-left: -0.125rem;
				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;
			}
		}
	}
}

// Checkbox hack
#citizen-search__checkbox:checked {
	// Transform the magnifying glass button into a crossmark
	~ .citizen-search__button {
		background-color: var( --background-color-primary--active );
	}
}
