/*
 * PureCSS.com
 * https://purecss.com/examples/show-hide-content/
 * Toggle visibility of content using a checkbox and the ~ combinator.
 */

.demo-show-hide-content .toggle-check {
		display: none;
	}

.demo-show-hide-content .toggle-btn {
		display: inline-block;
		padding: .6rem 1.25rem;
		background: var(--accent);
		color: var(--bg);
		border-radius: 8px;
		cursor: pointer;
		font-size: .95rem;
		user-select: none;
		transition: background .2s;
	}

:is(.demo-show-hide-content .toggle-btn):hover {
			background: var(--accent);
		}

.demo-show-hide-content .toggle-content {
		display: none;
		margin-top: 1rem;
		padding: 1rem 1.25rem;
		background: var(--accent-dim);
		border-left: 4px solid var(--accent);
		border-radius: 0 8px 8px 0;
		font-size: .95rem;
	}

.demo-show-hide-content .toggle-check:checked ~ .toggle-content {
		display: block;
	}

.demo-show-hide-content .toggle-check:checked ~ .toggle-btn {
		background: var(--accent);
	}