.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: var(--btn-height);
	width: fit-content;
	min-width: fit-content;
	max-width: 100%;
	margin: 0;
	padding: var(--btn-pad, 0);
	border: var(--btn-border-width, 0) solid var(--btn-border-color, transparent);
	background: var(--btn-bg, transparent);
	font-family: var(--font-family-2);
	font-size: 14px;
	line-height: 14px;
	font-weight: 800;
	text-transform: uppercase;
	transition: all 0.3s ease;
	border-radius: var(--radius-mid);
	cursor: pointer;
	user-select: none;
}
.btn span {
	height: 14px;
	color: var(--btn-color, inherit);
	transition: all 0.3s ease;
}
.btn img {
	height: 14px;
	width: auto;
	object-fit: contain;
	filter: var(--btn-img-filter, none);
	transition: filter 0.3s;
}
.btn.active {
	background: var(--btn-hover-bg, var(--btn-bg, transparent));
	border-color: var(--btn-hover-border-color, var(--btn-border-color, transparent));
}
@media not all and (pointer: coarse) {
	.btn:hover {
		background: var(--btn-hover-bg, var(--btn-bg, transparent));
		border-color: var(--btn-hover-border-color, var(--btn-border-color, transparent));
	}
}
.btn.active span {
	color: var(--btn-hover-color, var(--btn-color, inherit));
}
@media not all and (pointer: coarse) {
	.btn:hover span {
		color: var(--btn-hover-color, var(--btn-color, inherit));
	}
}
.btn.active img {
	filter: var(--btn-hover-img-filter, var(--btn-img-filter, none));
}
@media not all and (pointer: coarse) {
	.btn:hover img {
		filter: var(--btn-hover-img-filter, var(--btn-img-filter, none));
	}
}

/* Variants - Start */
.btn.btn-primary {
	--btn-pad: var(--btn-padding);
	--btn-bg: var(--primary);
	--btn-color: var(--primary-match);
	--btn-hover-bg: var(--accent);
	--btn-hover-color: var(--accent-match);
	--btn-img-filter: var(--primary-filter-match);
}

.btn.btn-accent {
	--btn-pad: var(--btn-padding);
	--btn-bg: var(--accent);
	--btn-color: var(--white);
	--btn-hover-bg: var(--primary);
	--btn-hover-color: var(--primary-match);
	--btn-hover-img-filter: brightness(0) invert(1);
}

.btn.btn-dark {
	--btn-pad: var(--btn-padding);
	--btn-bg: var(--black);
	--btn-color: var(--white);
	--btn-hover-bg: var(--white);
	--btn-hover-color: var(--black);
	--btn-img-filter: brightness(0) invert(1);
	--btn-hover-img-filter: none;
}

.btn.btn-white {
	--btn-pad: var(--btn-padding);
	--btn-bg: var(--white);
	--btn-color: var(--black);
	--btn-hover-bg: var(--black);
	--btn-hover-color: var(--white);
	--btn-hover-img-filter: brightness(0) invert(1);
}

.btn.btn-gray {
	--btn-pad: var(--btn-padding);
	--btn-bg: var(--gray);
	--btn-color: var(--black);
	--btn-hover-bg: var(--primary);
	--btn-hover-color: var(--primary-match);
}

.btn.btn-red {
	--btn-pad: var(--btn-padding);
	--btn-bg: var(--red);
	--btn-color: var(--white);
	--btn-hover-bg: var(--red-hover);
	--btn-hover-color: var(--white);
	--btn-img-filter: brightness(0) invert(1);
}

/* Border Variant - Start */
.btn.btn-border {
	--btn-pad: var(--btn-padding);
	--btn-border-width: 2px;
	--btn-border-color: var(--border);
	--btn-color: var(--black);
	--btn-hover-bg: var(--primary);
	--btn-hover-border-color: var(--primary);
	--btn-hover-color: var(--primary-match);
}
/* Border Variant - End */

/* Border + Primary - Start */
.btn.btn-border.primary {
	--btn-border-color: var(--primary);
	--btn-hover-img-filter: brightness(0);
}
/* Border + Primary - End */

/* Border + Red - Start */
.btn.btn-border.red {
	--btn-border-color: var(--red);
	--btn-color: var(--red);
	--btn-hover-bg: var(--red);
	--btn-hover-border-color: var(--red);
	--btn-hover-color: var(--white);
	--btn-hover-img-filter: var(--red-filter);
}
/* Border + Red - End */
/* Variants - End */

/* Special - Start */

.btn.btn-circle {
	--btn-border-width: 1px;
	--btn-border-color: var(--border);
	height: 38px;
	width: 38px;
	padding: 9px;
	border-radius: var(--radius-max);
}
.btn:is(.btn-catalog, .btn-sale) {
	font-size: 16px;
	line-height: 16px;
	font-weight: 400;
}
.btn.btn-small {
	height: var(--btn-height-small);
}
.btn.btn-full {
	width: 100%;
	--btn-pad: 0;
}
.btn.btn-50 {
	width: 50%;
	--btn-pad: 0;
}
/* Special - End */

/* Стани - Start */
.btn.disabled {
	--btn-bg: var(--gray);
	--btn-hover-bg: var(--gray);
}
.disabled {
	background: var(--gray);
}

@media (max-width: 768px) {
	.btn span {
		height: auto;
		text-align: center;
	}
}
/* Стани - End */