@use "../../abstracts/mixins";

.header-section-mobile {
	position: var(--header-section-mobile-position, relative);
	display: var(--header-section-mobile-display, flex);
	flex: 1;
	align-items: center;
	--search-icon-form-position: static;
	--search-icon-form-width: var(--viewport-width);

	.mai-icon {
		--link-color: var(--menu-toggle-color, var(--menu-item-link-color, var(--color-heading)));
		--link-color-hover: var(--menu-toggle-color, var(--menu-item-link-color, var(--color-heading)));
	}

	> * + * {
		margin-left: var(--spacing-lg);
	}
}

.header-left-mobile {
	justify-content: start;
	--search-icon-form-right: unset;
	--search-icon-form-left: calc(var(--side-spacing) * -1);
}

.header-right-mobile {
	justify-content: end;
	--search-icon-form-right: calc(var(--side-spacing) * -1);
	--search-icon-form-left: unset;
}

.header-search {
	z-index: 1;
	order: var(--header-search-order, unset);
	--search-toggle-icon-width: 1.5em;
	--search-input-width: 100%;
	--search-input-max-width: 100%;
}

@include mixins.mq(md) {

	.header-section-mobile {
		--search-icon-form-width: calc(var(--viewport-width) - (var(--side-spacing) * 2));
	}

	.header-left-mobile {
		--search-icon-form-left: 0;
	}

	.header-right-mobile {
		--search-icon-form-right: 0;
	}
}

.header-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}