.bp-button {
	display: inline-flex;
	gap: var(--bp-space-2);
	align-items: center;
	justify-content: center;
	min-height: var(--bp-target-min);
	padding: var(--bp-space-3) var(--bp-space-6);
	border: 1px solid transparent;
	border-radius: var(--bp-radius-sm);
	background: var(--bp-color-accent);
	color: var(--bp-color-text-inverse);
	font-weight: var(--bp-font-weight-bold);
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--bp-transition-fast),
		border-color var(--bp-transition-fast),
		color var(--bp-transition-fast),
		transform var(--bp-transition-fast);
}

.bp-button:hover {
	background: var(--bp-color-accent-hover);
	color: var(--bp-color-text-inverse);
}

.bp-button:active {
	background: var(--bp-color-accent-active);
	transform: translateY(1px);
}

.bp-button:focus-visible {
	outline: 0;
	box-shadow: var(--bp-focus-ring);
}

.bp-button--secondary {
	background: var(--bp-color-primary);
}

.bp-button--secondary:hover,
.bp-button--secondary:active {
	background: var(--bp-color-primary-hover);
}

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

.bp-button--outline:hover {
	border-color: var(--bp-color-primary);
	background: var(--bp-color-surface-subtle);
	color: var(--bp-color-primary);
}

.bp-button--small {
	min-height: var(--bp-target-min);
	padding: var(--bp-space-2) var(--bp-space-4);
	font-size: var(--bp-font-size-small);
}

.bp-button--wide {
	width: 100%;
}

.bp-button:is(:disabled, [aria-disabled="true"]) {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}

.bp-button__icon {
	flex: 0 0 auto;
	width: 1.125em;
	height: 1.125em;
}