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

/* TODO: Use SVG animtation to replace CSS icons */
.citizen-search {
	.citizen-menu__dropdownButton {
		.citizen-ui-icon {
			box-sizing: content-box; // Magic
			display: flex;
			align-items: center;
			justify-content: center;
			transition: var( --transition-hover );
			transition-property: transform;

			> span {
				position: relative;
				filter: var( --filter-invert );
				border-radius: var( --border-radius--small );
				opacity: var( --opacity-icon-base );
				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;
					margin-top: -0.3125rem;
					/* @noflip */
					margin-left: -0.125rem;
					border: 0.125rem solid #000;
					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;
				}
			}

			// Since this is a CSS icon, we don't need this
			&::before {
				content: none;
			}
		}

		&:hover {
			.citizen-ui-icon {
				> span {
					&:not( :last-child ) {
						opacity: var( --opacity-icon-base--hover );
					}

					&:first-child {
						height: 0.375rem;
						transform: translate3d( 0.125rem, 0.125rem, 0 ) rotate( -45deg );
					}
				}
			}
		}

		&:active {
			.citizen-ui-icon {
				> span {
					&:not( :last-child ) {
						opacity: var( --opacity-icon-base--active );
					}
				}
			}
		}
	}

	&.citizen-menu__dropdown[ open ] {
		.citizen-menu__dropdownButton {
			.citizen-ui-icon {
				> span {
					&:first-child {
						height: 1rem;
						transform: translate3d( -0.3125rem, -0.3125rem, 0 ) rotate( 135deg );
					}

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

					&:last-child {
						opacity: var( --opacity-icon-base );
					}
				}
			}

			&:hover {
				.citizen-ui-icon {
					transform: scale( 0.85 );
				}
			}
		}
	}
}

/* @noflip */
.rtl {
	.citizen-search .citizen-menu__dropdownButton:hover {
		.citizen-ui-icon > span {
			&:first-child {
				left: 0.125rem;
			}

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