.shared-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;

	min-height: 2.2rem;
	padding: 0.625rem 1rem;
	border: 1px solid transparent;
	border-radius: 0.75rem;

	font: inherit;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;

	transition:
		background-color 160ms ease,
		border-color 160ms ease,
		color 160ms ease,
		transform 160ms ease;
}

.shared-button:hover:not(:disabled) {
	transform: translateY(-1px);
}

.shared-button:active:not(:disabled) {
	transform: translateY(0);
}

.shared-button:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
	outline-offset: 2px;
}

.shared-button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.shared-button[data-submit-pending="true"] {
	cursor: wait;
}

.shared-button[data-submit-pending="true"]::before {
	content: "";
	width: 0.8rem;
	height: 0.8rem;
	flex: 0 0 auto;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: shared-button-spinner 700ms linear infinite;
}

@keyframes shared-button-spinner {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.shared-button[data-submit-pending="true"]::before {
		animation: none;
	}
}

.shared-button--primary {
	background: var(--color-action);
	color: var(--color-text-on-action);
}

.shared-button--primary:hover:not(:disabled) {
	background: color-mix(in srgb, var(--color-action) 88%, white);
}

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

.shared-button--secondary:hover:not(:disabled) {
	background: var(--color-surface-raised);
	border-color: var(--color-text-muted);
}

.shared-button--danger {
	background: var(--color-danger);
	color: white;
}

.shared-button--danger:hover:not(:disabled) {
	background: var(--color-danger-hover);
}

.shared-button--danger-ghost {
	border-color: color-mix(in srgb, var(--color-danger) 32%, transparent);
	color: var(--color-danger);
	background: color-mix(in srgb, var(--color-danger) 9%, transparent);
}

.shared-button--danger-ghost:hover:not(:disabled) {
	border-color: color-mix(in srgb, var(--color-danger) 58%, transparent);
	color: var(--color-text-on-danger);
	background: color-mix(in srgb, var(--color-danger) 24%, transparent);
}

.shared-button--danger-ghost:focus-visible {
	outline-color: color-mix(in srgb, var(--color-danger) 65%, transparent);
}

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

.shared-button--ghost:hover:not(:disabled) {
	background: var(--color-surface);
}

.shared-button--icon-after {
	flex-direction: row-reverse;
}

.shared-button--icon-only {
	width: 2.2rem;
	aspect-ratio: 1 / 1;
	padding-inline: 0;
	padding: 0.36rem;
}