/*
 * PureCSS.com
 * https://purecss.com/examples/confirm-button/
 * A two-stage destructive action button that uses a checkbox to reveal the confirm step.
 */

.demo-confirm-button .confirm-wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1.25rem;
	}

.demo-confirm-button .confirm-input {
		display: none;
	}

.demo-confirm-button .btn-trigger {
		display: inline-flex;
		align-items: center;
		gap: .5rem;
		padding: .7rem 1.5rem;
		border-radius: var(--radius);
		font-family: var(--font-sans);
		font-size: .95rem;
		font-weight: 600;
		cursor: pointer;
		transition: background .2s, transform .2s;
		user-select: none;
	}

.demo-confirm-button .btn-danger {
		background: var(--coral-dim);
		color: var(--coral);
		border: 2px solid var(--coral);
	}

:is(.demo-confirm-button .btn-danger):hover {
			background: var(--coral);
			color: #fff;
		}

.demo-confirm-button .confirm-panel {
		display: none;
		align-items: center;
		gap: .75rem;
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: var(--radius-lg);
		padding: .75rem 1.25rem;
		animation: confirm-slide-in .2s ease;
	}

:is(.demo-confirm-button .confirm-panel) p {
			font-size: .9rem;
			color: var(--text-muted);
			white-space: nowrap;
		}

.demo-confirm-button .btn-yes {
		padding: .45rem 1rem;
		background: var(--coral);
		color: #fff;
		border: none;
		border-radius: var(--radius);
		font-family: var(--font-sans);
		font-size: .875rem;
		font-weight: 600;
		cursor: pointer;
		transition: opacity .15s;
	}

:is(.demo-confirm-button .btn-yes):hover {
			opacity: .85;
		}

.demo-confirm-button .btn-cancel {
		padding: .45rem 1rem;
		background: var(--surface-2);
		color: var(--text-muted);
		border-radius: var(--radius);
		font-size: .875rem;
		font-weight: 500;
		cursor: pointer;
		user-select: none;
		display: inline-block;
		transition: color .15s;
	}

:is(.demo-confirm-button .btn-cancel):hover {
			color: var(--text);
		}

.demo-confirm-button .confirm-input:checked ~ .confirm-panel {
		display: flex;
	}

.demo-confirm-button .confirm-input:checked ~ .btn-trigger {
		opacity: .4;
		pointer-events: none;
	}

@keyframes confirm-slide-in {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}