/* ==========================================================================
   Component: Button
   Типы: primary / secondary / opacity / stroke
   Размеры: xl / l / m / s / xs (+ адаптивные btn--lg-*, btn--md-*, btn--sm-*)
   ========================================================================== */

.btn {
	--btn-bg: var(--c-orange);
	--btn-bg-hover: var(--c-orange-active);
	--btn-color: var(--c-white);
	--btn-color-hover: var(--c-white);
	--btn-stroke: transparent;
	--btn-stroke-hover: transparent;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--btn-gap);
	padding: var(--btn-py) var(--btn-px);
	border-radius: 4px;
	font-size: var(--btn-fs);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: var(--ls);
	white-space: nowrap;
	color: var(--btn-color);
	background-color: var(--btn-bg);
	/* обводка «внутрь», как в Figma — размеры кнопки не меняются */
	box-shadow: inset 0 0 0 var(--btn-bw) var(--btn-stroke);
	cursor: pointer;
	user-select: none;
	transition: background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}

.btn:hover,
.btn:active,
.btn.is-active {
	color: var(--btn-color-hover);
	background-color: var(--btn-bg-hover);
	box-shadow: inset 0 0 0 var(--btn-bw) var(--btn-stroke-hover);
}

.btn__icon {
	width: var(--btn-ic);
	height: var(--btn-ic);
	transform: rotate(90deg);
}

/* Типы */

.btn--secondary {
	--btn-bg: var(--c-black);
	--btn-bg-hover: var(--c-grafit);
}

.btn--opacity {
	--btn-bg: rgba(255, 255, 255, 0.1);
	--btn-bg-hover: rgba(255, 255, 255, 0.18);
}

.btn--stroke {
	--btn-bg: transparent;
	--btn-bg-hover: transparent;
	--btn-color: var(--c-orange);
	--btn-stroke: var(--c-orange);
	--btn-stroke-hover: var(--c-white);
}

/* Размеры: 1920 */

.btn--xl {
	--btn-py: 16px;
	--btn-px: 24px;
	--btn-gap: 12px;
	--btn-fs: 20px;
	--btn-ic: 24px;
	--icon-w: 16px;
	--icon-h: 20px;
	--btn-bw: 2px;
}

.btn--xl .btn__icon {
	-webkit-mask-image: url("../../../assets/icons/arrow-xl.svg");
	mask-image: url("../../../assets/icons/arrow-xl.svg");
}

.btn--l {
	--btn-py: 14px;
	--btn-px: 20px;
	--btn-gap: 12px;
	--btn-fs: 18px;
	--btn-ic: 20px;
	--icon-w: 13.6667px;
	--icon-h: 17px;
	--btn-bw: 1.6px;
}

.btn--l .btn__icon {
	-webkit-mask-image: url("../../../assets/icons/arrow-l.svg");
	mask-image: url("../../../assets/icons/arrow-l.svg");
}

.btn--m {
	--btn-py: 12px;
	--btn-px: 18px;
	--btn-gap: 10px;
	--btn-fs: 16px;
	--btn-ic: 18px;
	--icon-w: 12.5px;
	--icon-h: 15.5px;
	--btn-bw: 1.2px;
}

.btn--m .btn__icon {
	-webkit-mask-image: url("../../../assets/icons/arrow-m.svg");
	mask-image: url("../../../assets/icons/arrow-m.svg");
}

.btn--s {
	--btn-py: 10px;
	--btn-px: 16px;
	--btn-gap: 8px;
	--btn-fs: 14px;
	--btn-ic: 16px;
	--icon-w: 10.7333px;
	--icon-h: 13.4px;
	--btn-bw: 1px;
}

.btn--s .btn__icon {
	-webkit-mask-image: url("../../../assets/icons/arrow-s.svg");
	mask-image: url("../../../assets/icons/arrow-s.svg");
}

.btn--xs {
	--btn-py: 6px;
	--btn-px: 10px;
	--btn-gap: 6px;
	--btn-fs: 12px;
	--btn-ic: 12px;
	--icon-w: 8.4px;
	--icon-h: 10.4px;
	--btn-bw: 1px;
}

.btn--xs .btn__icon {
	-webkit-mask-image: url("../../../assets/icons/arrow-xs.svg");
	mask-image: url("../../../assets/icons/arrow-xs.svg");
}

/* 1440 */

@media (max-width: 1919.98px) {
	.btn--lg-xl {
		--btn-py: 16px;
		--btn-px: 24px;
		--btn-gap: 12px;
		--btn-fs: 20px;
		--btn-ic: 24px;
		--icon-w: 16px;
		--icon-h: 20px;
		--btn-bw: 2px;
	}

	.btn--lg-xl .btn__icon {
		-webkit-mask-image: url("../../../assets/icons/arrow-xl.svg");
		mask-image: url("../../../assets/icons/arrow-xl.svg");
	}

	.btn--lg-l {
		--btn-py: 14px;
		--btn-px: 20px;
		--btn-gap: 12px;
		--btn-fs: 18px;
		--btn-ic: 20px;
		--icon-w: 13.6667px;
		--icon-h: 17px;
		--btn-bw: 1.6px;
	}

	.btn--lg-l .btn__icon {
		-webkit-mask-image: url("../../../assets/icons/arrow-l.svg");
		mask-image: url("../../../assets/icons/arrow-l.svg");
	}

	.btn--lg-m {
		--btn-py: 12px;
		--btn-px: 18px;
		--btn-gap: 10px;
		--btn-fs: 16px;
		--btn-ic: 18px;
		--icon-w: 12.5px;
		--icon-h: 15.5px;
		--btn-bw: 1.2px;
	}

	.btn--lg-m .btn__icon {
		-webkit-mask-image: url("../../../assets/icons/arrow-m.svg");
		mask-image: url("../../../assets/icons/arrow-m.svg");
	}

	.btn--lg-s {
		--btn-py: 10px;
		--btn-px: 16px;
		--btn-gap: 8px;
		--btn-fs: 14px;
		--btn-ic: 16px;
		--icon-w: 10.7333px;
		--icon-h: 13.4px;
		--btn-bw: 1px;
	}

	.btn--lg-s .btn__icon {
		-webkit-mask-image: url("../../../assets/icons/arrow-s.svg");
		mask-image: url("../../../assets/icons/arrow-s.svg");
	}

	.btn--lg-xs {
		--btn-py: 6px;
		--btn-px: 10px;
		--btn-gap: 6px;
		--btn-fs: 12px;
		--btn-ic: 12px;
		--icon-w: 8.4px;
		--icon-h: 10.4px;
		--btn-bw: 1px;
	}

	.btn--lg-xs .btn__icon {
		-webkit-mask-image: url("../../../assets/icons/arrow-xs.svg");
		mask-image: url("../../../assets/icons/arrow-xs.svg");
	}
}

/* 1024 */

@media (max-width: 1439.98px) {
	.btn--md-xl {
		--btn-py: 16px;
		--btn-px: 24px;
		--btn-gap: 12px;
		--btn-fs: 20px;
		--btn-ic: 24px;
		--icon-w: 16px;
		--icon-h: 20px;
		--btn-bw: 2px;
	}

	.btn--md-xl .btn__icon {
		-webkit-mask-image: url("../../../assets/icons/arrow-xl.svg");
		mask-image: url("../../../assets/icons/arrow-xl.svg");
	}

	.btn--md-l {
		--btn-py: 14px;
		--btn-px: 20px;
		--btn-gap: 12px;
		--btn-fs: 18px;
		--btn-ic: 20px;
		--icon-w: 13.6667px;
		--icon-h: 17px;
		--btn-bw: 1.6px;
	}

	.btn--md-l .btn__icon {
		-webkit-mask-image: url("../../../assets/icons/arrow-l.svg");
		mask-image: url("../../../assets/icons/arrow-l.svg");
	}

	.btn--md-m {
		--btn-py: 12px;
		--btn-px: 18px;
		--btn-gap: 10px;
		--btn-fs: 16px;
		--btn-ic: 18px;
		--icon-w: 12.5px;
		--icon-h: 15.5px;
		--btn-bw: 1.2px;
	}

	.btn--md-m .btn__icon {
		-webkit-mask-image: url("../../../assets/icons/arrow-m.svg");
		mask-image: url("../../../assets/icons/arrow-m.svg");
	}

	.btn--md-s {
		--btn-py: 10px;
		--btn-px: 16px;
		--btn-gap: 8px;
		--btn-fs: 14px;
		--btn-ic: 16px;
		--icon-w: 10.7333px;
		--icon-h: 13.4px;
		--btn-bw: 1px;
	}

	.btn--md-s .btn__icon {
		-webkit-mask-image: url("../../../assets/icons/arrow-s.svg");
		mask-image: url("../../../assets/icons/arrow-s.svg");
	}

	.btn--md-xs {
		--btn-py: 6px;
		--btn-px: 10px;
		--btn-gap: 6px;
		--btn-fs: 12px;
		--btn-ic: 12px;
		--icon-w: 8.4px;
		--icon-h: 10.4px;
		--btn-bw: 1px;
	}

	.btn--md-xs .btn__icon {
		-webkit-mask-image: url("../../../assets/icons/arrow-xs.svg");
		mask-image: url("../../../assets/icons/arrow-xs.svg");
	}
}

/* 375 */

@media (max-width: 1023.98px) {
	.btn--sm-xl {
		--btn-py: 16px;
		--btn-px: 24px;
		--btn-gap: 12px;
		--btn-fs: 20px;
		--btn-ic: 24px;
		--icon-w: 16px;
		--icon-h: 20px;
		--btn-bw: 2px;
	}

	.btn--sm-xl .btn__icon {
		-webkit-mask-image: url("../../../assets/icons/arrow-xl.svg");
		mask-image: url("../../../assets/icons/arrow-xl.svg");
	}

	.btn--sm-l {
		--btn-py: 14px;
		--btn-px: 20px;
		--btn-gap: 12px;
		--btn-fs: 18px;
		--btn-ic: 20px;
		--icon-w: 13.6667px;
		--icon-h: 17px;
		--btn-bw: 1.6px;
	}

	.btn--sm-l .btn__icon {
		-webkit-mask-image: url("../../../assets/icons/arrow-l.svg");
		mask-image: url("../../../assets/icons/arrow-l.svg");
	}

	.btn--sm-m {
		--btn-py: 12px;
		--btn-px: 18px;
		--btn-gap: 10px;
		--btn-fs: 16px;
		--btn-ic: 18px;
		--icon-w: 12.5px;
		--icon-h: 15.5px;
		--btn-bw: 1.2px;
	}

	.btn--sm-m .btn__icon {
		-webkit-mask-image: url("../../../assets/icons/arrow-m.svg");
		mask-image: url("../../../assets/icons/arrow-m.svg");
	}

	.btn--sm-s {
		--btn-py: 10px;
		--btn-px: 16px;
		--btn-gap: 8px;
		--btn-fs: 14px;
		--btn-ic: 16px;
		--icon-w: 10.7333px;
		--icon-h: 13.4px;
		--btn-bw: 1px;
	}

	.btn--sm-s .btn__icon {
		-webkit-mask-image: url("../../../assets/icons/arrow-s.svg");
		mask-image: url("../../../assets/icons/arrow-s.svg");
	}

	.btn--sm-xs {
		--btn-py: 6px;
		--btn-px: 10px;
		--btn-gap: 6px;
		--btn-fs: 12px;
		--btn-ic: 12px;
		--icon-w: 8.4px;
		--icon-h: 10.4px;
		--btn-bw: 1px;
	}

	.btn--sm-xs .btn__icon {
		-webkit-mask-image: url("../../../assets/icons/arrow-xs.svg");
		mask-image: url("../../../assets/icons/arrow-xs.svg");
	}
}