@use '../lib/colors';
@use '../lib/layout';
@use '../lib/typography';

// This is an HTML/CSS-only tabs component. It expects the following markup:
//
//   <div class="tabs-widget">
//     <div id="second" class="tab">Other, totally novel content.</div>
//     <a href="#second" rel="tab">Second</a>
//     <div id="first" class="tab">Some content, including a heading.</div>
//     <a href="#first" rel="tab">First</a>
//   </div>
//
// The key thing here is that the container is a flexbox with that flows in
// reverse row direction. That means that the first element in the container
// <div> will be shown last, which means we can use the ~ and + selectors to
// target all and the immediately following tabs and / or their corresponding
// links.
// The last tab in the DOM (which is shown first because of the reversed
// flexbox) is shown by default, while the other ones are hidden. If one of the
// tabs is targeted by the URL's hash, it is shown instead and the default tab
// is hidden.
.tabs-widget {
	@extend %content;
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	justify-content: center;

	> a {
		display: block;
		margin: 0 layout.$normal-gap;
		text-decoration: none;
		color: inherit;
	}

	> .tab {
		flex: 100% 1;
		order: 9999;
		display: none;
		background: colors.$gray-50;

		&:last-of-type,
		&:target {
			display: block;

			+ a {
				font-weight: typography.$emphasized-weight;
				color: colors.$blue-800;
			}
		}

		&:target {
			~ .tab {
				display: none;

				+ a {
					font-weight: inherit;
					color: inherit;
				}
			}
		}
	}

	@media screen and (min-width: layout.$breakpoint) {
		> .tab {
			padding: layout.$large-gap;
			@include colors.card-shadow;
		}
	}
}
