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

#search {
	&-checkbox {
		&:checked {
			~ #searchform {
				z-index: 10;
				pointer-events: auto; // clickable
				transform: none;
			}

			~ #search-toggle-icon {
				#search-toggle-icon {
					&-2 {
						border-color: transparent;
					}

					&-1 {
						height: 14px;
						transform: translate3d( -5px, -7px, 0 ) rotate( 135deg );
					}

					&-3 {
						opacity: 1;
					}
				}

				&:hover {
					border-color: @base-0;

					#search-toggle-icon-3 {
						opacity: 0;
					}
				}
			}

			&:hover {
				~ #search-toggle-icon {
					#search-toggle-icon {
						&-1 {
							height: 12px;
							transform: translate3d( -5px, -7px, 0 ) rotate( 135deg );
						}

						&-2 {
							border-color: transparent;
						}

						&-3 {
							height: 12px;
						}

						&-1,
						&-3 {
							background-color: var( --background-color-icon--hover );
						}
					}
				}
			}

			&:active {
				~ #search-toggle-icon {
					#search-toggle-icon {
						&-1,
						&-3 {
							background-color: var( --background-color-icon--active );
						}
					}
				}
			}
		}
	}

	&form {
		--width-search-bar: @width-search-bar;
		--height-search-bar: @height-search-bar;
		position: absolute;
		z-index: -1; // not interactable
		top: 0;
		right: @margin-side / 2;
		display: flex;
		margin: 7px 0 8px; // 1px h3 screen reader
		border-radius: @border-radius-small;
		pointer-events: none; // not clickable
		transform: translateX( 120% );
		transition: @transition-transform-quick;
		.boxshadow(4);

		&-icon {
			position: absolute;
			z-index: 110;
			width: var( --height-search-bar );
			height: var( --height-search-bar );
			background-position: center;
			background-repeat: no-repeat;
			background-size: 14px;
			opacity: var( --opacity-icon-base );
		}

		&-random {
			position: absolute;
			z-index: 120;
			right: 38px;
			width: var( --height-search-bar );
			height: var( --height-search-bar );
			background-position: center;
			background-repeat: no-repeat;
			background-size: 18px;
			opacity: var( --opacity-icon-base );
			transition: @transition-transform-quick, @transition-opacity-quick;

			&:hover {
				opacity: var( --opacity-icon-base--hover );
				transform: rotate( 30deg );
			}

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

	&-toggle {
		position: absolute;
		z-index: 21; // override to be on top of the form
		right: 0; // align checkbox with icon
		width: ~'calc( var( --width-button-corner ) - 10px )';
		height: var( --height-header );

		&-icon {
			position: relative;
			z-index: 20; // stay on top of search form
			display: flex;
			width: var( --width-button-base );
			height: var( --height-header );
			align-items: center;
			justify-content: center;
			margin-right: 10px;
			transition: @transition-transform-quick, @transition-height-quick, @transition-opacity-quick, @transition-border-color-quick;

			&-1 {
				top: 7px;
				/* @noflip */
				left: 12px;
				height: 8px;
				transform: rotate( -45deg );
			}

			&-2 {
				width: 10px;
				height: 10px;
				/* Use background-color variable because it is a part of the logo */
				border: solid 2px var( --background-color-icon );
				margin-top: -4px;
				/* @noflip */
				margin-left: -2px;
				border-radius: 100%;
				transform: rotate( -45deg );
			}

			&-3 {
				top: 0;
				left: -7px;
				height: 14px;
				opacity: 0;
				transform: rotate( -135deg );
			}

			&-1,
			&-3 {
				width: 2px;
				background-color: var( --background-color-icon );
			}
		}

		&:hover {
			~ #search-toggle-icon {
				#search-toggle-icon {
					&-1 {
						height: 6px;
						background-color: var( --background-color-icon--hover );
						transform: translate3d( 2px, 2px, 0 ) rotate( -45deg );
					}

					&-2 {
						border-color: var( --background-color-icon--hover );
					}
				}
			}
		}

		&:active {
			~ #search-toggle-icon {
				#search-toggle-icon {
					&-1 {
						background-color: var( --background-color-icon--active );
					}

					&-2 {
						border-color: var( --background-color-icon--active );
					}
				}
			}
		}
	}

	&Input {
		z-index: 100;
		width: var( --width-search-bar );
		max-width: ~'calc( 100vw - var( --padding-page ) )';
		height: var( --height-search-bar );
		padding: 8px ~'calc( var( --height-search-bar ) * 2 )' 8px var( --height-search-bar );
		border: 1px solid var( --border-color-base--lighter );
		appearance: none;
		background: var( --background-color-dp-03 );
		border-radius: @border-radius-small;
		transition: @transition-background-quick, @transition-box-shadow-quick;

		&:focus {
			background-color: var( --background-color-dp-08 );
			outline: 0;
			.boxshadow(5);
		}
	}
}

.search {
	&-toggle-icon-div {
		position: relative;
		border-radius: @border-radius-large;
		transition: inherit;
	}
}

/* @noflip */
.rtl {
	#search-toggle-icon {
		&-1 {
			left: 2px;
		}

		&-2 {
			margin-left: -4px;
		}
	}
}

.skin-citizen-dark {
	#search {
		&form {
			&-icon,
			&-random {
				filter: invert( 1 );
			}
		}
	}
}

@media ( max-width: var( --width-search-bar ) ) {
	#search {
		&form {
			transition: none; // no transition on mobile

			&:before {
				position: fixed;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				display: block;
				background: var( --background-color-dp-03 );
				content: '';
				opacity: 0.9;
			}
		}
	}
}