/*
 * PureCSS.com
 * https://purecss.com/examples/tab-navigation/
 * Tabbed interface using radio inputs and the :checked pseudo-class.
 */

.demo-tab-navigation .tabs {
		display: flex;
		flex-direction: column;
		width: 320px;
	}

.demo-tab-navigation .tab-inputs {
		display: none;
	}

.demo-tab-navigation .tab-labels {
		display: flex;
		border-bottom: 2px solid var(--border);
	}

.demo-tab-navigation .tab-label {
		padding: .6rem 1.1rem;
		cursor: pointer;
		font-size: .9rem;
		font-weight: 500;
		color: var(--text-muted);
		border-bottom: 2px solid transparent;
		margin-bottom: -2px;
		user-select: none;
		transition: color .2s;
	}

:is(.demo-tab-navigation .tab-label):hover {
			color: var(--accent);
		}

.demo-tab-navigation .tab-panel {
		display: none;
		padding: 1.25rem 0;
		font-size: .9rem;
		color: var(--text);
	}

#demo-tab-navigation-t1:checked ~ .tab-labels label[for="demo-tab-navigation-t1"],
#demo-tab-navigation-t2:checked ~ .tab-labels label[for="demo-tab-navigation-t2"],
#demo-tab-navigation-t3:checked ~ .tab-labels label[for="demo-tab-navigation-t3"] {
	color: var(--accent);
	border-bottom-color: var(--accent);
}

#demo-tab-navigation-t1:checked ~ .tab-panels #demo-tab-navigation-p1,
#demo-tab-navigation-t2:checked ~ .tab-panels #demo-tab-navigation-p2,
#demo-tab-navigation-t3:checked ~ .tab-panels #demo-tab-navigation-p3 {
	display: block;
}