/* components/button: one look for every action, a link or a button alike. The variant gives the colours;
   the state is the attribute (aria-current, aria-disabled), never a class. */
@layer components {
	.dv-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-2);
		box-sizing: border-box;
		min-block-size: var(--touch-target);
		padding: var(--space-1) var(--space-3);
		font: inherit;
		font-size: var(--font-size-control);
		line-height: 1.25;
		text-align: center;
		text-decoration: none;
		color: var(--color-on-secondary);
		background: var(--color-secondary);
		border: 1px solid transparent;
		cursor: pointer;
	}

	.dv-button:hover {
		text-decoration: underline;
	}

	.dv-button[aria-current] {
		font-weight: bold;
		text-decoration: underline;
	}

	.dv-button[aria-disabled="true"] {
		cursor: not-allowed;
		opacity: 0.6;
	}

	.dv-button--primary {
		color: var(--color-on-primary);
		background: var(--color-primary);
	}

	.dv-button--primary:hover {
		color: var(--color-on-primary-hover);
		background: var(--color-primary-hover);
	}

	.dv-button--secondary {
		border-color: var(--color-border);
	}

	.dv-button--secondary:hover {
		color: var(--color-on-secondary-hover);
		background: var(--color-secondary-hover);
	}

	.dv-button--accent {
		color: var(--color-on-accent);
		background: var(--color-accent);
	}

	.dv-button--success {
		color: var(--color-on-success);
		background: var(--color-success);
	}

	.dv-button--danger {
		color: var(--color-on-danger);
		background: var(--color-danger);
	}

	/* Focus wins over the variant and the hover, on every background. */
	.dv-button:focus-visible {
		color: var(--color-focus-text);
		background: var(--color-focus-background);
		outline: var(--focus-outline-width) solid var(--color-focus-outline);
		outline-offset: var(--focus-outline-offset);
	}
}