/**
 * Button component.
 */

.dc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--dc-space-2);
	min-height: var(--dc-touch-target);
	padding: var(--dc-space-3) var(--dc-space-6);
	font-weight: 600;
	font-size: var(--dc-font-size-base);
	text-decoration: none;
	border-radius: var(--dc-radius-md);
	border: 2px solid transparent;
	transition: background var(--dc-transition), border-color var(--dc-transition), color var(--dc-transition);
	cursor: pointer;
}

.dc-btn--primary {
	background: var(--dc-colour-brand);
	color: #fff;
}

.dc-btn--primary:hover {
	background: var(--dc-colour-brand-dark);
}

.dc-btn--secondary {
	background: var(--dc-colour-surface);
	color: var(--dc-colour-text);
	border-color: var(--dc-colour-border);
}

.dc-btn--secondary:hover {
	border-color: var(--dc-colour-brand);
	color: var(--dc-colour-brand);
}

.dc-btn--lg {
	padding: var(--dc-space-4) var(--dc-space-8);
	font-size: var(--dc-font-size-lg);
}

.dc-btn--block {
	width: 100%;
}

.dc-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}