<!-- Inspired by https://dribbble.com/shots/3693442-Tabs -->

<!-- Illustrations: https://undraw.co/ -->
<main mv-app="tabs"
		mv-bar="no-login"
		mv-storage="https://github.com/DmitrySharabin/mavo-tabs-widget">
	<h2 property="headline">Headline</h2>
	<section mv-list class="tabs" style="--count: [count(tab)];">
		<details property="tab"
					mv-list-item
					open="[open]"
					mv-action="set(open.$all, false), set(open, true)">
			<meta property="open" />
			
			<summary property="title">
				<img class="icon"
					  src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1457119/undraw_research.svg"
					  mv-attr-src="image" alt="Icon for the [text] tab" />
				<span property="text">Tab name</span>
			</summary>
			
			<section property="content">
				<h3 property="headline">Tab headline</h3>
				<img property="image"
					  src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1457119/undraw_research.svg"
					  alt="Illustration for [headline]" />
				<p property="text">Tab content</p>
				<a property="url" href="#">
					<span property="destination">Call to action</span>
				</a>
			</section>		
		</details>
	</section>
</main>
<footer>
	<p>
		Want to see how it works under the hood and/or add your content? Simply <a href="?login">log in</a> with your <b>Github</b> account.
	</p>
	<p>
		Made with Mavo. Want to know more? Visit the
		<a href="https://mavo.io/">Mavo website</a>.
	</p>
</footer>

:root {
	--main-color: hsl(232, 47%, 56%);
	--main-color-accent: hsl(230, 58%, 30%);

	--text-color: hsl(208, 13%, 45%);
	--text-color-accent: hsl(235, 26%, 35%);

	--background-color: hsl(220, 38%, 97%);
	
	--line-color: hsl(249, 20%, 86%);

	--max-width: 60rem;
	--min-width: 45rem;
}

*, *::before, *::after {
	box-sizing: border-box;
}

body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	
	margin: 0 auto;
	min-width: var(--min-width);
	max-width: var(--max-width);
	min-height: 100vh;

	color: var(--text-color);
	background-color: var(--background-color);

	font-family: Helvetica, Arial, sans-serif;
	
	& > p {
		margin: 1em 2em;
		
		text-align: center;
	}
}

[mv-app] {
	min-width: var(--min-width);
	max-width: 90vw;

	background-color: white;

	border-radius: 0.5em;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
					0 10px 10px -5px rgba(0, 0, 0, 0.04),
					0 35px 2px -20px hsl(240, 20%, 92%);
}

[mv-app] > [property="headline"] {
	margin: 0;
	padding: 1.1em 1em;
	
	text-align: center;

	color: var(--text-color-accent);
	border-bottom: 1px solid var(--line-color);
}

.tabs {
	display: grid;
	grid-template-columns: repeat(var(--count, 5), minmax(8em, 1fr));
	grid-template-rows: auto auto;
}

details[property="tab"] {
	display: contents;
	
	&[open] {
		[property="content"] {
			grid-column: 1 / -1;
			
			width: auto;
		}
	}

	&:not([open]) {

		[property="title"] {
			color: hsl(232, 16%, 61%);
			background-color: hsl(210, 29%, 97%);
			
			border-bottom: 1px solid var(--line-color);
			
			.icon {
				filter: grayscale(85%) opacity(45%);
			}
		}

		[property="content"] {
			display: none;
		}
	}
	
	&:first-child {
		[property="title"] {
			border-left: none;
		}
	}
}

[property="title"] {
	grid-row: 1;
	padding: 1em;
	
	display: flex;
	flex-direction: column;
	align-items: center;
	
	border-left: 1px solid var(--line-color);
	
	color: var(--main-color);

	text-align: center;

	list-style: none;
	&::-webkit-details-marker {
		display: none;
	}
	
	.icon {
		max-height: 5em;
		
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 1em;
	}
		
	&:focus {
		outline: none;
	}
}

[property="content"] {
	grid-row: 2;
	
	padding: 3em 1em;

	display: grid;
	grid-template-columns: 1.5fr 2fr;
	grid-column-gap: 1.2em;
	grid-template-areas:
		"image headline"
		"image text"
		"image link";

	[property="image"] {
		grid-area: image;
		
		max-width: 70%;
		max-height: 22em;
		margin: auto;
	}

	[property="headline"] {
		grid-area: headline;
		
		margin-bottom: 0.5em;
		
		color: var(--main-color);
		
		&:not([mv-mode="edit"]) {
			background-clip: text;
			-webkit-text-fill-color: transparent;

			background-image: linear-gradient(
				to right,
				var(--main-color),
				var(--main-color-accent)
			);
		}
		
		font-size: 170%;
	}

	[property="text"] {
		grid-area: text;

		line-height: 1.5em;
	}

	[property="url"] {
		grid-area: link;
		align-self: center;

		display: block;
		width: max-content;
		
		margin-top: 1.5em;
		padding: 0.7em 2em;

		color: white;
		background-image: linear-gradient(
			135deg,
			var(--main-color),
			var(--main-color-accent)
		);
		
		border-radius: 999px;
		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
						0 2px 4px -1px rgba(0, 0, 0, 0.06);

		font-size: 0.8em;
		
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		
		&:hover {
			filter: brightness(135%);
		}
	}
}

[mv-app][mv-mode="edit"] [property="open"] {
	display: none;
}

footer {
	margin-top: 3em;
	
	text-align: center;
	
	a {
		color: var(--main-color);
	}
}

::-moz-focus-inner {
	border: 0;
}