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

// 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 );
	}
}
