@use 'sass:map';
@use '../../../base/maps/tokens' as *;
@use '../../../base/mixins/typography' as font;
@use '../../../base/mixins/breakpoints' as break;
@use '../../../base/functions' as *;

.toggle-menu {
	display: none;
	width: var(--padding-extra-large);
	height: var(--padding-extra-large);
	border-width: 0.0625rem;
	border-style: solid;
	border-radius: var(--radius-medium);
	transition: var(--transition-fast);
	cursor: pointer;
	color: var(--action);
	background-color: with-opacity(var(--action), 5);
	border-color: with-opacity(var(--action), 50);

	&::after {
		content: '\e92b'; // icon-menu
		font-family: brandui-icons;
		font-size: 1.5rem;
		font-weight: 500;
	}

	&:hover,
	&:focus-within,
	&.open {
		color: var(--action-contrast);
		background-color: var(--action);
	}

	&.open {
		&::after {
			content: '\e916'; // icon-close
		}
	}

	@include break.max-tablet {
		display: flex;
		align-items: center;
		justify-content: center;
	}
}