/* BLOCK TYPE 7 - menu */
/* BLOCK TYPE 7 - menu */
/* BLOCK TYPE 7 - menu */

.block_type_7 {
	position: relative;
	padding: 4em;
	font-size: 1vw;
	font-weight: 100;
}
.block_type_7::before {
	content: '7';
	background-color: #84de02;
}
/* THEME */
.block_type_7.theme_licht,
.tabs.theme_licht {
	background-color: var(--bg-light);
	color: var(--txt-light);
}
.block_type_7.theme_donker,
.tabs.theme_donker {
	background-color: var(--bg-dark);
	color: var(--txt-dark);
}

/* TABS */
[role='tablist'] {
	position: relative;
	display: flex;
	/* width: fill-content; */
	font-size: 1.75vw;
	border-bottom: 1px solid hsl(0 0% 30%);
	margin-block: 3rem;
}

[role='tablist']::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	scale: var(--_width, 0.1) 1;
	translate: var(--_left, 0) 0;
	transform-origin: left;
	transition: scale 200ms, translate 200ms;
	background: white;
}

[role='tab'] {
	color: #fff;
	background: lightblue;
	background: transparent;
	padding: 1em 2em;
	border: 0;
	font: inherit;
	/* text-transform: uppercase; */
	font-weight: 500;
	opacity: 0.5;
	cursor: pointer;
	transition: 0.25s ease-in-out;
}

[role='tab']:hover {
	opacity: 1;
	color: #fff;
}

[role='tab'][aria-selected='true'] {
	opacity: 1;
}

.tabpanel {
	height: 0px;
	transition: 0.5s linear;
	overflow: hidden;
}
.tabpanel.active {
	height: auto;
}

@media (max-width: 1000px) {
	[role='tablist'] {
		font-size: 3.6vw;
	}
	[role='tab'] {
		flex-grow: 1;
		padding: 1em 0;
	}
}