/* action-message — token test component. Uses the full token vocabulary.
   $todo: stroke vs ink-auxiliary for borders — still deciding. */

action-message {
	display: block;
	max-width: 80ch;
	background-color: var(--fill-secondary);
	border: 1px solid var(--stroke-primary);
	border-radius: 8px;
	padding: 1.5rem;

	.message-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: 1rem;
	}

	/* ink-primary: heading */
	.message-heading {
		color: var(--ink-primary);
		margin: 0;
	}

	/* accent: badge */
	.badge {
		background-color: var(--fill-auxiliary);
		color: var(--accent);
		padding: 0.25em 0.75em;
		border-radius: 999px;
		font-size: 0.75rem;
		font-weight: 600;
		display: inline-flex;
		align-items: center;
		gap: 0.5em;

		&::before {
			content: '';
			width: 0.5em;
			height: 0.5em;
			background-color: var(--accent);
			border-radius: 50%;
		}
	}

	/* ink-secondary: body text */
	.message-body {
		margin-top: 0.5rem;
		color: var(--ink-secondary);
	}

	/* accent: links */
	.message-link {
		margin-top: 0.5rem;

		a {
			color: var(--accent);
			text-decoration: underline;
		}
	}

	/* ink-auxiliary: meta text */
	.message-meta {
		margin-top: 0.75rem;
		color: var(--ink-auxiliary);
		font-size: 0.85rem;
	}

	/* stroke-secondary: divider */
	.message-divider {
		border: none;
		border-top: 1px solid var(--stroke-secondary);
		margin: 1.25rem 0;
	}

	.message-actions {
		display: flex;
		gap: 1rem;
	}

	/* Button prominence variants — all use accent */
	.action {
		padding: 0.75em 1.5em;
		border-radius: 6px;
		font-weight: 500;
		cursor: pointer;
		border: none;

		&.filled {
			background-color: var(--accent);
			color: white;
		}

		&.tinted {
			background-color: color-mix(in oklch, var(--accent) 20%, transparent);
			color: var(--accent);
		}

		&.text {
			background: none;
			color: var(--accent);
			text-decoration: underline;
			padding-inline: 0;
		}
	}

	/* Token swatch strip — visual reference */
	.token-swatch-strip {
		display: flex;
		gap: 0.5rem;
		margin-top: 1.5rem;
		padding-top: 1rem;
		border-top: 1px solid var(--stroke-auxiliary);
	}

	.swatch {
		width: 2rem;
		height: 2rem;
		border-radius: 50%;
		border: 1px solid var(--stroke-secondary);

		&[data-token="fill-primary"] { background-color: var(--fill-primary); }
		&[data-token="fill-secondary"] { background-color: var(--fill-secondary); }
		&[data-token="fill-auxiliary"] { background-color: var(--fill-auxiliary); }
		&[data-token="ink-primary"] { background-color: var(--ink-primary); }
		&[data-token="ink-secondary"] { background-color: var(--ink-secondary); }
		&[data-token="ink-auxiliary"] { background-color: var(--ink-auxiliary); }
		&[data-token="stroke-primary"] { background-color: var(--stroke-primary); }
		&[data-token="stroke-secondary"] { background-color: var(--stroke-secondary); }
		&[data-token="accent"] { background-color: var(--accent); }
	}
}