.fullscreen-search {
	display: none;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	position: fixed;
	width: 100%;
	height: 100%;
	background: transparent;
	opacity: 0;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	transition:
		opacity 0.2s ease,
		display 0.2s allow-discrete;
	z-index: 999999;

	.close-search {
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: center;
		top: 0;
		right: 0;
		width: 3rem;
		height: 3rem;
		padding: 1em;
		z-index: 3;

		svg {
			fill: var(--wp--preset--color--primary);
			transition: 200ms;
		}

		&:hover {
			cursor: pointer;
			svg {
				fill: var(--wp--preset--color--secondary);
			}
		}
	}

	.search-form {
		display: flex;
		height: auto;
		width: 80%;
		max-width: 600px;
		justify-content: center;
		flex-direction: column;
		padding: 2rem;
		margin: 0 auto;
		opacity: 0;
		transform: translateY(1em);
		transition: 450ms var(--wp--custom--transition--smooth);

		form {
			display: flex;
			align-items: stretch;
			flex-wrap: wrap;
			border-radius: 8px;
			border: 1px solid var(--wp--preset--color--grey);
			transition: 200ms ease;

			&:focus-within {
				border-color: var(--wp--preset--color--secondary);
			}
		}

		label {
			width: 100%;
			display: inline-block;
			font-family: var(--wp--preset--font-family--secondary);
			color: #fff;
			font-size: 3.6rem;
			text-transform: none;
			line-height: 1;
			margin: 0 0 1rem;
		}

		input {
			-webkit-appearance: none;
			flex: 1;
			box-shadow: none;
			outline: none;
			padding: 1rem;
			font-size: 1.125rem;
			border-radius: 8px;
			color: var(--wp--preset--color--body);
			line-height: 1;
			border: 0;
			background: transparent;

			&:focus {
				background: #fff;
			}
		}

		button {
			-webkit-appearance: none;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			border: 0;
			outline: 0;
			background: transparent;
			color: #fff;
			width: 4rem;
			font-size: 1.25rem;
			line-height: 1;
			padding: 1.2rem;

			svg {
				fill: var(--wp--preset--color--primary);
				transition: 200ms;
			}

			&:hover {
				cursor: pointer;

				svg {
					fill: var(--wp--preset--color--secondary);
				}
			}
		}
	}
}

.fullscreen-search.active {
	display: flex;
	opacity: 1;

	@starting-style {
		opacity: 0;
	}

	.search-form {
		opacity: 1;
		transition-delay: 150ms;
		transform: translateY(0);

		@starting-style {
			opacity: 0;
			transform: translateY(1em);
		}
	}
}