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

.search-container {
	position: relative;
}

#search {
	&form {
		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;
		opacity: 0;
		pointer-events: none; // not clickable
		transition: @transition-opacity;
		.boxshadow(4);

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

		&-random {
			position: absolute;
			z-index: 120;
			right: 38px;
			width: @search-bar-height;
			height: @search-bar-height;
			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 {
		z-index: 21; // override to be on top of the form
		right: 0; // align checkbox with icon

		&-icon {
			position: relative;
			z-index: 20; // stay on top of search form
			display: flex;
			width: @icon-box-size + @margin-side + @icon-padding;
			height: @header-height;
			align-items: center;
			justify-content: center;
			transition: @transition-transform-quick, @transition-height-quick, @transition-opacity-quick, @transition-border-color-quick;

			&-1 {
				top: 7px;
				left: 12px;
				height: 10px;
				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: -2px;
				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 );
			}
		}

		&:checked {
			~ #searchform {
				z-index: 10;
				opacity: 1;
				pointer-events: auto; // clickable

				#searchInput {
					width: @search-bar-width;
				}
			}

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

					&-1 {
						height: 14px;
						transform: translate( -5px, -7px ) 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: translate( -5px, -7px ) 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 );
						}
					}
				}
			}
		}

		&:hover {
			~ #search-toggle-icon {
				#search-toggle-icon {
					&-1 {
						height: 6px;
						background-color: var( --background-color-icon--hover );
						transform: translate( 2px, 2px ) 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: 0;
		max-width: calc( ~'100vw -'@margin-side );
		height: @search-bar-height;
		padding: 8px @icon-box-size + @icon-padding + @search-bar-height + @margin-side / 2 8px @search-bar-height;
		border: 1px solid var( --border-color-base--lighter );
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		background: var( --background-color-dp-03 );
		border-radius: @border-radius-small;
		transition: @transition-width, @transition-background, @transition-box-shadow;

		&: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;
	}
}

// RTL styles
.rtl {
	#search {
		&form {
			/* @noflip */
			right: unset !important;
			/* @noflip */
			left: 10px !important;
		}

		&-toggle {
			&-icon {
				&-1 {
					transform: rotate( 45deg );
				}

				&-2 {
					transform: rotate( 45deg );
				}

				&-3 {
					transform: rotate( 135deg );
				}
			}

			&:checked {
				~ #search-toggle-icon {
					#search-toggle-icon {
						&-1 {
							transform: translate( -5px, -7px ) rotate( -135deg );
						}
					}
				}

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

			&:hover {
				~ #search-toggle-icon {
					#search-toggle-icon {
						&-1 {
							transform: translate( 2px, 2px ) rotate( 45deg );
						}
					}
				}
			}
		}
	}
}

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

@media ( max-width: @search-bar-width ) {
	#search {
		&form:before {
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			display: block;
			background: var( --background-color-dp-03 );
			content: '';
			opacity: 0.9;
		}

		&Input {
			transition: none; // Width transition does not play well on mobile
		}
	}
}