/* ==========================================================================
   Component: Nav link («Button link»)
   main:    Regular, 70% #E4E4E4 → белый
   heading: SemiBold, #F8F8F8 → #DD3800
   1920: 16/18px, шеврон 18, gap 12 · 1440 и 1024: 14/16px, шеврон 14, gap 8 ·
   375: 12px, шеврон 12, gap 6
   ========================================================================== */

.nav-link {
	--nl-chevron: var(--c-grey);
	--nl-chevron-hover: var(--c-white);

	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 4px 0;
	border-radius: 4px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	text-align: left;
	color: var(--c-link-muted);
	transition: color var(--t-fast);
}

.nav-link:hover,
.nav-link.is-active {
	color: var(--c-white);
}

.nav-link--heading {
	--nl-chevron: var(--c-light);
	--nl-chevron-hover: var(--c-orange-active);

	font-size: 18px;
	font-weight: 600;
	color: var(--c-light);
}

.nav-link--heading:hover,
.nav-link--heading.is-active {
	color: var(--c-orange-active);
}

.nav-link__chevron {
	width: 18px;
	height: 18px;
	color: var(--nl-chevron);
	-webkit-mask-image: url("../../../assets/icons/chevron-down-18.svg");
	mask-image: url("../../../assets/icons/chevron-down-18.svg");
	transition: color var(--t-fast), transform var(--t-fast);
}

.nav-link:hover .nav-link__chevron,
.nav-link.is-active .nav-link__chevron {
	color: var(--nl-chevron-hover);
}

.nav-link--chevron-down.is-open .nav-link__chevron,
.is-open > .nav-link--chevron-down .nav-link__chevron {
	transform: rotate(180deg);
}

.nav-link--chevron-right .nav-link__chevron {
	-webkit-mask-image: url("../../../assets/icons/chevron-right-14.svg");
	mask-image: url("../../../assets/icons/chevron-right-14.svg");
}

@media (max-width: 1919.98px) {
	.nav-link {
		gap: 8px;
		font-size: 14px;
	}

	.nav-link--heading {
		font-size: 16px;
	}

	.nav-link__chevron {
		width: 14px;
		height: 14px;
		-webkit-mask-image: url("../../../assets/icons/chevron-down-14.svg");
		mask-image: url("../../../assets/icons/chevron-down-14.svg");
	}

	.nav-link--chevron-right .nav-link__chevron {
		-webkit-mask-image: url("../../../assets/icons/chevron-right-14.svg");
		mask-image: url("../../../assets/icons/chevron-right-14.svg");
	}
}

@media (max-width: 1023.98px) {
	.nav-link {
		gap: 6px;
		font-size: 12px;
	}

	.nav-link--heading {
		font-size: 12px;
	}

	.nav-link__chevron {
		width: 12px;
		height: 12px;
		-webkit-mask-image: url("../../../assets/icons/chevron-down-12.svg");
		mask-image: url("../../../assets/icons/chevron-down-12.svg");
	}

	.nav-link--chevron-right .nav-link__chevron {
		-webkit-mask-image: url("../../../assets/icons/chevron-down-12.svg");
		mask-image: url("../../../assets/icons/chevron-down-12.svg");
		transform: rotate(-90deg);
	}
}