/* =============================================
   02_UI_COMPONENTS / ui-button
   Простая кнопка (без иконки).
   Варианты: --darkgreen, --green, --white, --lightgreen
   ============================================= */

.button {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 14px 28px;
	transition: background-color 0.3s, color 0.3s, border-color 0.3s;
	border-radius: 10px;
	font-weight: 500;
	outline: 2px solid transparent;
}
.button._disabled {
	pointer-events: none;
}
.button[disabled] {
	pointer-events: none;
}

/* ── Вариант: Dark Green ── */

.button.button--darkgreen {
	background-color: var(--greenColor2);
	color: var(--whiteColor);
}
.button.button--darkgreen:active {
	outline-color: rgba(35, 92, 82, 0.2);
	background-color: var(--greenColor2);
}
.button.button--darkgreen[disabled],
.button.button--darkgreen._disabled {
	background-color: var(--greenColor5);
}

/* ── Вариант: Green ── */

.button.button--green {
	background-color: var(--greenColor4);
	color: var(--whiteColor);
}
.button.button--green:active {
	outline-color: rgba(8, 146, 100, 0.2);
	background-color: var(--greenColor4);
}
.button.button--green[disabled],
.button.button--green._disabled {
	background-color: #63ad95;
}

/* ── Вариант: White ── */

.button.button--white {
	background-color: var(--whiteColor);
	color: var(--greenColor4);
}
.button.button--white:active {
	outline-color: #089264;
	color: var(--greenColor5);
}
.button.button--white[disabled],
.button.button--white._disabled {
	color: var(--greenColor5);
}

/* ── Вариант: Light Green ── */

.button.button--lightgreen {
	background-color: var(--greenColor6);
	color: var(--greenColor4);
}
.button.button--lightgreen:active {
	outline-color: rgba(8, 146, 100, 0.2);
	background-color: var(--greenColor6);
}
.button.button--lightgreen[disabled],
.button.button--lightgreen._disabled {
	color: var(--greenColor5);
}

/* ── Responsive ── */

@media (max-width: 63.99875em) {
	.button {
		font-size: 12px;
		line-height: 125%;
	}
}
@media (min-width: 63.99875em) {
	.button {
		font-size: 16px;
		line-height: 125%;
	}
}

/* ── Hover ── */

@media (any-hover: hover), (pointer: fine) {
	html:not([data-fls-touch]) .button.button--darkgreen:hover {
		background-color: var(--greenColor1);
	}
	html:not([data-fls-touch]) .button.button--darkgreen:active:hover {
		background-color: var(--greenColor2);
	}
	html:not([data-fls-touch]) .button.button--green:hover {
		background-color: var(--greenColor3);
	}
	html:not([data-fls-touch]) .button.button--green:active:hover {
		background-color: var(--greenColor4);
	}
	html:not([data-fls-touch]) .button.button--white:hover {
		color: var(--greenColor2);
	}
	html:not([data-fls-touch]) .button.button--white:active:hover {
		color: var(--greenColor5);
	}
	html:not([data-fls-touch]) .button.button--lightgreen:hover {
		background-color: var(--greenColor5);
	}
	html:not([data-fls-touch]) .button.button--lightgreen:active:hover {
		background-color: var(--greenColor6);
	}
}