.menu-header-secondary__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: var(--spacing-10);
	align-items: center;

	@media (width > 768px) {
		gap: var(--spacing-20);
	}

	> li > a {
		display: flex;
		align-items: center;
		gap: var(--spacing-5);
		text-decoration: none;
		color: var(--white);
		justify-content: center;
		font-size: var(--step--1);
		transition: color 0.5s;

		&:hover,
		&:focus-visible {
			color: var(--gray-200);

			.menu-header-secondary__icon {
				background-color: var(--purple-400);
			}
		}
	}

	li {
		display: block;
		transition-duration: 0.5s;
		margin: 0;

		@media (width > 768px) {
			display: inline-block;
		}
	}
}

.menu-header-secondary__icon {
	background-color: var(--purple-500);
		border-radius: var(--btn-radius);
	width: 32px;
	height: 32px;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: background-color 0.5s;

	svg {
		width: 18px;
		height: 18px;
	}
}