/* Button
---------*/

	.nexo-ui-button {
		--nexo-ui-button-background: #ffffff;
		--nexo-ui-button-background-hover: #f4f4f5;
		--nexo-ui-button-border: #e4e4e7;
		--nexo-ui-button-color: #18181b;
		--nexo-ui-button-focus: rgba(113, 113, 122, 0.22);
		--nexo-ui-button-height: 32px;
		--nexo-ui-button-padding: 0 12px;
		--nexo-ui-button-radius: 7px;
		--nexo-ui-button-font-size: 14px;
		--nexo-ui-button-gap: 8px;

		display: inline-flex;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		gap: var(--nexo-ui-button-gap);
		height: var(--nexo-ui-button-height);
		padding: var(--nexo-ui-button-padding);
		border: 1px solid var(--nexo-ui-button-border);
		border-radius: var(--nexo-ui-button-radius);
		outline: none;
		background-color: var(--nexo-ui-button-background);
		color: var(--nexo-ui-button-color);
		font-family: inherit;
		font-size: var(--nexo-ui-button-font-size);
		font-weight: 500;
		line-height: 1;
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
		vertical-align: middle;
		cursor: pointer;
		touch-action: manipulation;
		-webkit-user-select: none;
		user-select: none;
		-webkit-appearance: none;
		appearance: none;
		transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, opacity 150ms ease, transform 100ms ease;
	}

	.nexo-ui-button:hover {
		background-color: var(--nexo-ui-button-background-hover);
		color: var(--nexo-ui-button-color);
		text-decoration: none;
	}

	.nexo-ui-button:focus-visible {
		box-shadow: 0 0 0 3px var(--nexo-ui-button-focus);
	}

	.nexo-ui-button:active {
		transform: translateY(1px);
	}

	.nexo-ui-button:disabled,
	.nexo-ui-button[aria-disabled="true"],
	.nexo-ui-button[aria-busy="true"] {
		opacity: 0.5;
		pointer-events: none;
	}

	.nexo-ui-button[aria-busy="true"] {
		cursor: progress;
	}

	.nexo-ui-button > svg,
	.nexo-ui-button > .mdi,
	.nexo-ui-button > [data-icon] {
		flex-shrink: 0;
		width: 16px;
		height: 16px;
		font-size: 16px;
		line-height: 1;
		pointer-events: none;
	}

/* Varianten
------------*/

	.nexo-ui-button-variant--outline {
		--nexo-ui-button-background: #ffffff;
		--nexo-ui-button-background-hover: #f4f4f5;
		--nexo-ui-button-border: #e4e4e7;
		--nexo-ui-button-color: #18181b;
		--nexo-ui-button-focus: rgba(113, 113, 122, 0.22);
	}

	.nexo-ui-button-variant--secondary {
		--nexo-ui-button-background: #f4f4f5;
		--nexo-ui-button-background-hover: #e4e4e7;
		--nexo-ui-button-color: #18181b;
		--nexo-ui-button-focus: rgba(113, 113, 122, 0.22);
	}

	.nexo-ui-button-variant--ghost {
		--nexo-ui-button-background: transparent;
		--nexo-ui-button-background-hover: #f4f4f5;
		--nexo-ui-button-color: #18181b;
		--nexo-ui-button-focus: rgba(113, 113, 122, 0.22);
	}

	.nexo-ui-button-variant--destructive {
		--nexo-ui-button-background: #dc2626;
		--nexo-ui-button-background-hover: #b91c1c;
		--nexo-ui-button-color: #ffffff;
		--nexo-ui-button-focus: rgba(220, 38, 38, 0.24);
	}

	.nexo-ui-button-variant--link {
		--nexo-ui-button-background: transparent;
		--nexo-ui-button-background-hover: transparent;
		--nexo-ui-button-color: #18181b;
		--nexo-ui-button-focus: rgba(113, 113, 122, 0.22);

		height: auto;
		padding: 0;
		text-underline-offset: 4px;
	}

	.nexo-ui-button-variant--link:hover {
		text-decoration: underline;
	}

/* Größen
---------*/

	.nexo-ui-button-size--xs {
		--nexo-ui-button-height: 24px;
		--nexo-ui-button-padding: 0 8px;
		--nexo-ui-button-font-size: 12px;
		--nexo-ui-button-gap: 4px;
		--nexo-ui-button-radius: 4px;
	}

	.nexo-ui-button-size--sm {
		--nexo-ui-button-height: 32px;
		--nexo-ui-button-padding: 0 12px;
		--nexo-ui-button-font-size: 13px;
		--nexo-ui-button-gap: 6px;
	}

	.nexo-ui-button-size--lg {
		--nexo-ui-button-height: 40px;
		--nexo-ui-button-padding: 0 24px;
		--nexo-ui-button-gap: 8px;
	}

	.nexo-ui-button-size--icon,
	.nexo-ui-button-size--icon-xs,
	.nexo-ui-button-size--icon-sm,
	.nexo-ui-button-size--icon-lg {
		width: var(--nexo-ui-button-height);
		padding: 0;
	}

	.nexo-ui-button-size--icon-xs {
		--nexo-ui-button-height: 24px;
		--nexo-ui-button-radius: 4px;
	}

	.nexo-ui-button-size--icon-sm {
		--nexo-ui-button-height: 32px;
	}

	.nexo-ui-button-size--icon-lg {
		--nexo-ui-button-height: 40px;
	}

	@media (prefers-reduced-motion: reduce) {
		.nexo-ui-button {
			transition: none;
		}
	}