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

@width-search-bar: 800px;
@position-offset-y-desktop: 3.5rem; /* Sync with search button position */

.citizen-search {
	--width-search-bar: @width-search-bar;
	--height-search-bar: 2.75rem;

	@media ( min-width: @min-width-breakpoint-desktop ) {
		--height-search-bar: 3rem;
	}

	.citizen-menu__card {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		width: var( --width-search-bar );
		max-width: ~'calc(100vw - var( --padding-page ) )';
		max-height: var( --header-card-maxheight );
		margin-right: auto;
		margin-left: auto;
		overflow-y: auto;
		overscroll-behavior: contain;
		transform-origin: center var( --transform-origin-offset-start );
		contain: none;

		@media ( min-width: @min-width-breakpoint-desktop ) {
			top: @position-offset-y-desktop;
			max-height: ~'calc( 100vh - @{position-offset-y-desktop} * 2 )';
			overflow-y: auto;
		}
	}

	.citizen-dropdown-details[ open ] + .citizen-menu__card > .citizen-search__form {
		transition: none; /* Do not animate typeahead since it looks weird */
	}

	&__formButton,
	&__formIcon {
		--size-icon: 1rem;
		display: grid;
		place-content: center;
		/* Sync with left icons (--size-icon + --space-sm * 2) and typeahead */
		width: ~'calc( 1.25rem + var( --space-sm ) * 2 )';
		height: ~'calc( 1.25rem + var( --space-sm ) * 2 )';
	}

	&__formButton {
		cursor: pointer;
		border-radius: var( --border-radius-base );

		.citizen-ui-icon::before {
			transition: var( --transition-hover );
			transition-property: opacity;
		}

		&:hover {
			background-color: var( --background-color-button-quiet--hover );

			.citizen-ui-icon::before {
				opacity: var( --opacity-icon-base--hover );
			}
		}

		&:active {
			background-color: var( --background-color-button-quiet--active );

			.citizen-ui-icon::before {
				opacity: var( --opacity-icon-base--selected );
			}
		}
	}

	&__clear {
		.citizen-ui-icon::before {
			background-size: 0.875rem; // Align with text size
		}
	}

	&__random {
		.citizen-ui-icon::before {
			transition-property: opacity, transform;
		}

		&:hover {
			.citizen-ui-icon::before {
				transform: rotate( 30deg );
			}
		}
	}

	&__form {
		position: sticky;
		top: 0;
		z-index: @z-index-stacking-1;
		display: flex;
		height: 100%;
		overflow: hidden;
		font-size: var( --font-size-small );
		background-color: inherit;

		// HACK: Target mobile Safari only to prevent auto zooming the input field
		@supports (-webkit-touch-callout: none) {
			font-size: 1rem;
		}

		@media ( min-width: @min-width-breakpoint-desktop ) {
			font-size: var( --font-size-medium );
		}

		/**
		 * Loading indicator for searchbox
		 * See common/progressbar.less
		 **/
		&.citizen-loading::after {
			position: absolute;
			top: 100%;
		}
	}

	#searchInput {
		flex-grow: 1;
		padding: 0;
		font-size: inherit;
		appearance: none;
		background: transparent; // Cancel default background
		border: 0; // Cancel default border

		&:focus {
			outline: 0;
			// The search suggestion pop-up indicates for focus state
			// border-color: var( --color-progressive );
			// box-shadow: inset 0 0 0 1px var( --color-progressive );
		}

		// Remove browser native clear all button in search field
		&::-webkit-search-cancel-button {
			-webkit-appearance: none;
		}
	}

	&__footer {
		position: sticky;
		bottom: 0;
		display: flex;
		gap: var( --space-lg );
		align-items: center;
		justify-content: space-between;
		min-height: 2.5rem;
		padding: 0 var( --space-md );
		overflow: hidden;
		font-size: var( --font-size-x-small );
		color: var( --color-subtle );
		white-space: nowrap;
		background-color: inherit;
		border-top: 1px solid var( --border-color-base );

		&-start,
		&-end {
			display: flex;
			gap: var( --space-md );
			align-items: center;
		}
	}
}

@media ( max-width: @max-width-breakpoint-tablet ) {
	.citizen-search {
		.citizen-menu__card {
			width: auto;
		}

		// Remove searchbox open animation on mobile
		// But keep suggestion animation
		// So user can get to search instantly
		> .citizen-dropdown[ open ] > .citizen-menu__card {
			transition: none;
		}
	}
}