.drvu-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 0;
	cursor: pointer;
	font: var(--drvu-label-md);
	letter-spacing: var(--drvu-tracking-label);
	border-radius: var(--drvu-radius);
	transition: all 0.3s ease;
	text-decoration: none;
	box-sizing: border-box;
	line-height: 1.2;
}

.drvu-btn--primary {
	background: var(--drvu-primary);
	color: var(--drvu-on-primary);
	padding: 12px 24px;
	box-shadow: var(--drvu-shadow-md);
}

.drvu-btn--primary:hover {
	background: var(--drvu-primary-container);
	color: var(--drvu-on-primary-container);
}

.drvu-btn--hero {
	padding: 16px 32px;
}

.drvu-btn--hero:hover {
	transform: scale(1.05);
	background: var(--drvu-primary);
	color: var(--drvu-on-primary);
}

.drvu-btn--outline {
	background: var(--drvu-on-tertiary);
	color: var(--drvu-secondary);
	border: 2px solid var(--drvu-secondary);
	padding: 16px 32px;
}

.drvu-btn--outline:hover {
	background: var(--drvu-secondary-container);
	color: var(--drvu-secondary);
}

.drvu-btn--soft {
	background: var(--drvu-primary-container);
	color: var(--drvu-on-primary-container);
	padding: 12px 24px;
}

.drvu-btn--soft:hover {
	background: var(--drvu-primary);
	color: var(--drvu-on-primary);
}

.drvu-btn .material-symbols-outlined {
	font-size: 18px;
}