.search-icon-form {
	position: var(--search-icon-form-position, relative) !important;

	.search-form {
		position: absolute;
		top: var(--search-icon-form-top, 100%);
		right: var(--search-icon-form-right, 0);
		bottom: var(--search-icon-form-bottom, unset);
		left: var(--search-icon-form-left, unset);
		display: var(--search-icon-form-display, none);
		width: var(--search-icon-form-width, unset);
		max-width: var(--search-icon-form-max-width, var(--wrap-max-width));
		padding: var(--spacing-sm);
		background-color: var(--color-white);
		border-radius: var(--input-border-radius) var(--button-border-radius) var(--button-border-radius) var(--input-border-radius);
		box-shadow: var(--shadow);
	}

	.search-form-visible {
		--search-icon-form-display: flex;
	}
}

.search-toggle {
	position: relative;
	margin: 0;
	padding: var(--menu-item-link-padding, var(--spacing-sm) var(--spacing-xxs));
	color: var(--search-toggle-color, var(--menu-item-link-color, var(--color-heading)));
	background: transparent;
	border: none;
	box-shadow: none;

	&:hover,
	&:focus-visible {
		color: var(--search-toggle-color-hover, var(--search-toggle-color, var(--menu-item-link-color, var(--color-heading))));
		background: transparent;
		border: none;
		box-shadow: none;
	}

	&[aria-expanded="true"] {
		--search-toggle-icon-display: none;
		--search-toggle-close-display: block;
	}
}

.search-toggle-text {
	margin-right: var(--spacing-xxs);
}

.search-toggle-icon,
.search-toggle-close {
	width: var(--search-toggle-icon-width, 1em);
	fill: currentColor;
}

.search-toggle-icon {
	display: var(--search-toggle-icon-display, block);
}

.search-toggle-close {
	display: var(--search-toggle-close-display, none);
}

.site-footer {
	--search-icon-form-top: auto; /* unset didn't work here */
	--search-icon-form-bottom: 100%;
}