.lo-button {
	display: inline-flex;
	gap: var(--lo-space-2);
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: var(--lo-space-3) var(--lo-space-5);
	color: var(--lo-color-text);
	font-size: var(--lo-font-size-base);
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: var(--lo-radius-small);
	transition:
		background-color var(--lo-transition-base),
		border-color var(--lo-transition-base),
		box-shadow var(--lo-transition-base),
		color var(--lo-transition-base),
		transform var(--lo-transition-base);
}

.lo-button:hover {
	transform: translateY(-1px);
}

.lo-button:focus-visible {
	box-shadow: 0 0 0 4px rgb(22 163 74 / 18%);
}

.lo-button:disabled,
.lo-button[aria-disabled="true"],
.lo-button.is-disabled {
	color: var(--lo-color-muted);
	pointer-events: none;
	cursor: not-allowed;
	background: var(--lo-color-disabled);
	border-color: var(--lo-color-border);
	box-shadow: none;
	opacity: 0.65;
	transform: none;
}

.lo-button-primary,
.lo-button-download,
.lo-button-success {
	color: #fff;
	background: var(--lo-color-primary);
	border-color: var(--lo-color-primary);
}

.lo-button-primary:hover,
.lo-button-download:hover,
.lo-button-success:hover {
	color: #fff;
	background: var(--lo-color-primary-dark);
	border-color: var(--lo-color-primary-dark);
	box-shadow: var(--lo-shadow-card);
}

.lo-button-secondary {
	color: var(--lo-color-text);
	background: var(--lo-color-surface-light);
	border-color: var(--lo-color-border);
}

.lo-button-secondary:hover {
	color: var(--lo-color-text);
	background: var(--lo-color-white);
	border-color: var(--lo-color-border-strong);
	box-shadow: var(--lo-shadow-card);
}

.lo-button-outline {
	color: var(--lo-color-text);
	background: transparent;
	border-color: var(--lo-color-border-strong);
}

.lo-button-outline:hover {
	color: var(--lo-color-primary-dark);
	background: var(--lo-color-primary-soft);
	border-color: rgb(22 163 74 / 35%);
}

.lo-button-ghost {
	color: var(--lo-color-text);
	background: transparent;
	border-color: transparent;
}

.lo-button-ghost:hover {
	color: var(--lo-color-primary-dark);
	background: var(--lo-color-primary-soft);
}

.lo-button-text {
	min-height: auto;
	padding: 0;
	color: var(--lo-color-primary);
	background: transparent;
	border-color: transparent;
}

.lo-button-text:hover {
	color: var(--lo-color-primary-dark);
	transform: none;
}