.dir-ui-button {
	min-height: 3.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--dir-ui-space-2);
	padding: 0.75rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--dir-ui-button-radius) !important;
	font-family: var(--dir-ui-font-heading);
	font-size: var(--dir-ui-font-size-300);
	font-weight: var(--dir-ui-font-weight-bold);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--dir-ui-transition-fast),
		border-color var(--dir-ui-transition-fast),
		color var(--dir-ui-transition-fast),
		transform var(--dir-ui-transition-fast);
}

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

.dir-ui-button:active {
	transform: translateY(0);
}

.dir-ui-button:disabled,
.dir-ui-button[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

.dir-ui-button--primary {
	color: var(--dir-ui-color-text-inverse);
	background: var(--dir-ui-color-brand-accessible);
	border-color: var(--dir-ui-color-brand-accessible);
}

.dir-ui-button--primary:hover,
.dir-ui-button--primary:focus-visible {
	color: var(--dir-ui-color-text-inverse);
	background: var(--dir-ui-color-brand-dark);
	border-color: var(--dir-ui-color-brand-dark);
}

.dir-ui-button--secondary {
	color: var(--dir-ui-color-brand-accessible);
	background: var(--dir-ui-color-neutral-0);
	border-color: var(--dir-ui-color-brand-accessible);
}

.dir-ui-button--secondary:hover,
.dir-ui-button--secondary:focus-visible {
	color: var(--dir-ui-color-brand-dark);
	background: var(--dir-ui-color-brand-soft);
	border-color: var(--dir-ui-color-brand-dark);
}