/*------------------------------------------------------------
	Button — front end (variant classes `.st-button--*`, icon, base `.st-button`)
------------------------------------------------------------*/

a.st-button,
button.st-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.25;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--st-radius--sm);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.st-button--primary {
	color: #fff;
	background-color: var(--st-color--accent-1);
}

.st-button--primary:hover,
.st-button--primary:active,
.st-button--primary:focus {
	color: #fff;
	background-color: color-mix(in srgb, var(--st-color--accent-1) 80%, #fff);
}

.st-button--info {
	color: #fff;
	background-color: var(--st-color--info);
}

.st-button--info:hover,
.st-button--info:active,
.st-button--info:focus {
	color: #fff;
	background-color: color-mix(in srgb, var(--st-color--info) 80%, #fff);
}

.st-button--success {
	color: #fff;
	background-color: var(--st-color--success);
}

.st-button--success:hover,
.st-button--success:active,
.st-button--success:focus {
	color: #fff;
	background-color: color-mix(in srgb, var(--st-color--success) 80%, #fff);
}

.st-button--warning {
	color: #fff;
	background-color: var(--st-color--warning);
}

.st-button--warning:hover,
.st-button--warning:active,
.st-button--warning:focus {
	color: #fff;
	background-color: color-mix(in srgb, var(--st-color--warning) 80%, #fff);
}

.st-button--error {
	color: #fff;
	background-color: var(--st-color--error);
}

.st-button--error:hover,
.st-button--error:active,
.st-button--error:focus {
	color: #fff;
	background-color: color-mix(in srgb, var(--st-color--error) 80%, #fff);
}

.st-button__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1rem;
	height: 1rem;
}

.st-button__icon svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}