/*
 * TABS.CSS
 * .jm-tabs: a row of tabs (home: Browse Mixes / My Shelf; login: Log in / Sign up). Cat: sand text, sand underline on the active tab.
 */

.jm-tabs {
	display: flex;
	margin: 0 0 var(--jm-space-4);
	border-bottom: 1px solid var(--jm-colour-line);
}

.jm-tabs__tab {
	flex: 1;
	padding: var(--jm-space-3) var(--jm-space-2);
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	color: var(--jm-colour-text-soft);
	font-size: var(--jm-text-s);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: color var(--jm-motion-time), border-color var(--jm-motion-time);
}

.jm-tabs__tab.is-active,
.jm-tabs__tab[aria-selected="true"] {
	color: var(--jm-colour-heading);
	border-bottom-color: var(--jm-colour-heading);
}