/*
 * PureCSS.com
 * https://purecss.com/examples/redacted-text/
 * Sensitive text blurred by default and revealed on hover using CSS filter: blur().
 */

.demo-redacted-text {
	max-width: 400px;
	font-size: .9rem;
	line-height: 1.85;
	color: var(--text);
}

.demo-redacted-text p {
		margin-bottom: 1rem;
	}

:is(.demo-redacted-text p):last-child {
			margin-bottom: 0;
		}

.demo-redacted-text .redacted {
		display: inline;
		filter: blur(5px);
		cursor: pointer;
		transition: filter .4s ease;
		user-select: none;
		color: var(--text);
		border-radius: 3px;
		padding: 0 .1em;
	}

:is(.demo-redacted-text .redacted):hover {
			filter: blur(0);
		}

.demo-redacted-text .hint {
		font-family: var(--font-mono);
		font-size: .7rem;
		color: var(--text-muted);
		display: block;
		margin-top: 1.25rem;
		letter-spacing: .04em;
	}