@layer components {
	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-block-size: 2.75rem;
		padding: 0.55rem 1rem;
		border: 1px solid var(--border);
		border-radius: var(--radius-sm);
		background: var(--surface-sunken);
		color: var(--ink);
		font-weight: 600;
		font-size: 0.92rem;
		cursor: pointer;
		transition: background-color 150ms ease;

		&:hover:not(:disabled) {
			background: color-mix(in oklch, var(--surface-sunken) 85%, var(--ink));
		}

		&:disabled {
			opacity: 0.5;
			cursor: not-allowed;
		}

		&.primary {
			background: var(--accent);
			border-color: var(--accent);
			color: var(--accent-ink);

			&:hover:not(:disabled) {
				background: color-mix(in oklch, var(--accent) 85%, var(--ink));
			}
		}

		&.danger:hover:not(:disabled) {
			background: var(--bad-soft);
			color: var(--bad);
		}
	}
}