:host {
	display: contents;
	--smoothly-tab-line-width: 2px;
	--smoothly-tab-line-width-active: 5px;
}
:host > div:first-child {
	grid-column: span 1;
	background-color: transparent;
	border-bottom-color: rgb(var(--smoothly-default-shade));
	border-bottom-width: var(--smoothly-tab-line-width);
	border-bottom-style: solid;
}
:host([disabled]) > div:first-child {
	color: rgba(var(--smoothly-default-contrast), 0.6);
}
:host([disabled]) > div:first-child > label {
	cursor: not-allowed;
}
:host > div:first-child > label {
	display: flex;
	justify-content: center;
	padding: 0.5rem 1rem;
	width: fit-content;
	border-radius: 0.5rem 0.5rem 0 0;
  margin: auto;
	cursor: pointer;
	position: relative;
}
:host:not([disabled]) > div:first-child > label:hover {
	background-color: rgb(var(--smoothly-tab-hover-background, var(--smoothly-default-shade)));
}
:host([open]) > div:first-child > label {
	
	font-weight: bold;
}
:host([open]) > div:first-child > label::before {
	content: '';
	position: absolute;
	height: var(--smoothly-tab-line-width-active);
	background-color: rgb(var(--smoothly-tab-active-line, var(--smoothly-primary-color)));
	inset-inline: 0;
	bottom: calc(-1 * var(--smoothly-tab-line-width));
}
:host > div:first-child > label[data-smoothly-tooltip]:hover::after {
	content: attr(data-smoothly-tooltip);
	font-size: 0.9rem;
	position: absolute;
	top: calc(100% + 0.25rem);
	padding: 0.5rem 0.75rem;
	border-radius: 0.5rem;
	background-color: rgb(var(--smoothly-medium-color));
	color: rgb(var(--smoothly-medium-contrast));
	white-space: nowrap;
	z-index: 1;
}

:host > div:nth-child(2) {
	grid-row: 2 / 3;
	grid-column: 1 / -1;
}