.menu-toggle {
	z-index: 100;
	display: var(--menu-toggle-display, flex);
	flex-direction: var(--menu-toggle-flex-direction, row);
	align-items: center;
	justify-content: center;
	order: var(--menu-toggle-order, unset);
	min-height: 2em;
	margin: 0;
	padding: var(--menu-toggle-padding, 0);
	color: currentColor; // Mostly for the 'Menu' text when screen-reader-text class is removed.
	--button-background: transparent;
	--button-background-hover: transparent;
	--button-text-decoration: none;
	--button-text-decoration-hover: none;
	--button-border: 0;
	--button-border-hover: 0;
	--button-box-shadow: none;
	--button-box-shadow-hover: none;
	--button-transform: 0;
	--button-transform-hover: 0;

	&:focus-visible {
		outline: var(--border);
	}
}

.menu-toggle-icon {
	position: relative;
	top: auto;
	right: auto;
	bottom: auto;
	margin: auto;
	color: var(--menu-toggle-color, var(--menu-item-link-color, var(--color-heading)));
	background: var(--menu-toggle-icon-background, currentColor);
	transition: var(--menu-toggle-transition, background 0s 0.2s);

	&,
	&::before,
	&::after {
		display: block;
		width: var(--menu-toggle-line-width, calc(var(--spacing-md) * 2));
		height: var(--menu-toggle-line-height, 2px);
		border-radius: var(--menu-toggle-line-border-radius, var(--border-radius));
	}

	&::before,
	&::after {
		position: absolute;
		background: currentColor;
		content: "";
	}

	&::before {
		top: var(--menu-toggle-line-spacing, calc(var(--spacing-md) * -0.5));
		transform: var(--menu-toggle-line-before-transform, rotate(0deg));
		transition: var(--menu-toggle-line-before-transition, top 0.2s 0.2s, transform 0.2s 0s);
	}

	&::after {
		bottom: var(--menu-toggle-line-spacing, calc(var(--spacing-md) * -0.5));
		transform: var(--menu-toggle-line-after-transform, rotate(0deg));
		transition: var(--menu-toggle-line-after-transition, bottom 0.2s 0.2s, transform 0.2s 0s);
	}

	+ span {
		margin-left: var(--spacing-xs);
	}
}

.mobile-menu-visible {
	--menu-toggle-icon-background: transparent;
	--menu-toggle-line-spacing: 0;
	--menu-toggle-line-before-transform: rotate(45deg);
	--menu-toggle-line-after-transform: rotate(-45deg);
	--menu-toggle-line-before-transition: top 0.2s 0s, transform 0.2s 0.2s;
	--menu-toggle-line-after-transition: top 0.2s 0s, transform 0.2s 0.2s;
}