@layer components {
	.button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.5em;
		min-height: 2.75rem;
		padding: 0.6rem 1.25rem;
		border: 1px solid var(--color-ink);
		border-radius: 2px;
		background: var(--color-ink);
		color: var(--color-paper);
		font-family: var(--font-sans);
		font-size: var(--text-small);
		font-weight: 600;
		letter-spacing: 0.02em;
		line-height: 1.2;
		text-align: center;
		text-decoration: none;
		cursor: pointer;
		transition: background-color 0.15s, color 0.15s;
	}

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

	.button-outline {
		background: transparent;
		color: var(--color-ink);
	}

	.button-outline:hover {
		background: var(--color-ink);
		color: var(--color-paper);
	}

	/* On black: the ticker, footer bar and hero panel on dark images. */
	.button-light {
		border-color: var(--color-paper);
		background: var(--color-paper);
		color: var(--color-ink);
	}

	.button-light:hover {
		background: transparent;
		color: var(--color-paper);
	}

	.button-small {
		min-height: 2.25rem;
		padding: 0.35rem 0.85rem;
		font-size: var(--text-label);
	}

	.button:disabled,
	.button[aria-disabled="true"] {
		border-color: var(--color-field);
		background: var(--color-panel);
		color: var(--color-muted);
		cursor: not-allowed;
	}

	.button .icon {
		width: 1em;
		height: 1em;
	}

	/* A text link with an arrow, for "More news" and card links. */
	.link-arrow {
		display: inline-flex;
		align-items: center;
		gap: 0.4em;
		font-family: var(--font-sans);
		font-size: var(--text-small);
		font-weight: 600;
	}

	.link-arrow .icon {
		width: 0.85em;
		height: 0.85em;
		transition: transform 0.15s;
	}

	.link-arrow:hover .icon {
		transform: translateX(3px);
	}

	/* The label above a page title that links back up a level, such as "News" on a story. */
	.link-back {
		display: inline-flex;
		align-items: center;
		gap: 0.4em;
	}

	.link-back .icon {
		width: 0.85em;
		height: 0.85em;
		transition: transform 0.15s;
	}

	.link-back:hover .icon {
		transform: translateX(-3px);
	}
}