.frontend-search-form {
	display: flex;
		border-radius: var(--btn-radius);
	border: 1px solid var(--gray-200);
	background: var(--white);
	max-width: 450px;
	position: relative;

	/* TODO: better selector. */
	main & {
		margin-inline: auto;
	}

	.header & {
		width: 100%;
		max-width: none;

		@media (width > 768px) {
			border: 0;
		}
	}
}

.frontend-search-form__label {
	position: absolute;
	inset: 0 auto 0 0;
	margin: 0;
	height: 100%;
	display: flex;
	align-items: center;
	padding: var(--spacing-10);
}

input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]).frontend-search-form__input {
	background: transparent;
		border-radius: var(--btn-radius);
	border: 0;
	padding: var(--spacing-10) var(--spacing-60) var(--spacing-10) var(--spacing-30);
	margin-inline-end: calc(var(--spacing-10) * -3);
	max-width: none;
}

.frontend-search-form__submit {
	min-width: auto;
	box-shadow: none;
	position: absolute;
	inset: 0 0 0 auto;
	margin: 0;
	height: 100%;
	display: flex;
	align-items: center;
}