.c-tabs {
	pre {
		margin-top: 0;
		margin-block-start: 0;
	}
}

.c-tabs__tablist {
	.js-tabs & {
		display: flex;
		justify-content: start;
	}
}

.c-tabs__tab {
	background: none;
	border: none;
	margin: 0;
	color: inherit;
	font: inherit;
	cursor: pointer;
	line-height: inherit;
	font-weight: 500;
	font-size: var(--step-0);
	display: inline-flex;
	padding: 0.75rem 1.125rem;
	align-items: center;
	justify-content: center;
	border-radius: var(--border-radius) var(--border-radius) 0 0;
	transition:
		background-color 0.2s linear,
		border-color 0.2s linear;

	&:hover {
		color: var(--link-color);
	}

	&[aria-selected="true"] {
		color: var(--link-color);
		background-color: var(--lightest-background-color);
	}
}

.c-tabs__tabpanel {
	margin-bottom: 2rem;
	margin-block-end: 2rem;
	background-color: var(--lightest-background-color);
	border-radius: 0 var(--border-radius) var(--border-radius)
		var(--border-radius);

	.js-tabs & {
		margin-bottom: 0;
		margin-block-end: 0;
	}
}

.c-tabs__tabpanel__title {
	margin-bottom: 1.5rem;
	margin-block-end: 1.5rem;
}

// when the js is enabled, the tabpanels are labelled by their tabs
// you may choose to hide or keep the headings inside of them visible
.js-tabs .c-tabs__tabpanel__title {
	display: none;
}
