/* TABS
========================================================================
*/

:where([role='tablist']) {
	--padding-tabs: calc(var(--s-input-padding-inline) * 2);

	display: flex;
	margin-bottom: var(--sugar-spacing-block);
	overflow: auto clip;
	padding-bottom: var(--s-border-width-max);
}

/* :where([role='tablist']:dir(ltr)):before,
:where([role='tablist']:dir(ltr)):after {
	--direction: 90deg;
	content: '';
	background-image: linear-gradient(var(--direction), var(--s-color-bg), transparent);
	position: sticky;
	inset-inline-start: 0;
	flex: 1 0 var(--padding-tabs);
	margin-inline-start: calc(-1 * var(--padding-tabs));
	margin-bottom: var(--s-border-width-max);
	z-index: 2;
}

:where([role='tablist']:dir(ltr)):after {
	--direction: 270deg;
	inset-inline-end: -1px;
	inset-inline-start: auto;
} */

:where([role='tablist'] > [role='tab']) {
	color: var(--s-color-text);
	background: var(--s-color-bg);
	border: none;
	position: relative;
	white-space: nowrap;
	outline-offset: var(--s-focus-offset-negative);
	border-radius: 0;

	/*  In case you need tab to be an anchor instead of a button uncomment the following code: */

	/* 	display: flex;
	width: 100%;
	justify-content: center;
	padding: var(--s-input-block-padding) var(--s-input-padding-inline); */
}

:where([role='tablist'] > [role='tab']):focus {
	outline: 2px solid -webkit-focus-ring-color;
}

:where([role='tablist'] > [role='tab']):after {
	position: absolute;
	content: '';
	display: block;
	width: 100%;
	inset-block-end: 0;
	inset-inline-start: 0;
	height: var(--s-border-width-max);
	background-color: var(--s-color-primary);
	translate: (0 var(--s-border-width-max));
}

:where([role='tablist'] > [role='tab']:first-child) {
	padding-inline-start: var(--padding-tabs);
}
:where([role='tablist'] > [role='tab']:last-child) {
	padding-inline-end: var(--padding-tabs);
}

:where([role='tablist'] > [role='tab'][aria-selected='false']):after {
	background-color: var(--s-color-separator);
}

:where([role='tablist'] + [role='tabpanel']) {
	margin-block-end: var(--sugar-spacing-block);
}

/* Above we added margin bottom for all tabpanels, 
but we need to remove it for all tabpanels of the last tablist, 
if the last tabpanel is last-child of its parent */
:where(
		[role='tablist']:not(:has(~ [role='tablist'])) ~ [role='tabpanel']:last-child,
		[role='tablist']:not(:has(~ [role='tablist']))
			~ [role='tabpanel']:has(~ [role='tabpanel']:last-child)
	) {
	margin-block-end: 0;
}

/* special treatment if tablist and tabpanel are only children on an article */

:where(article:not(:has(> :not([role='tablist']):not([role='tabpanel'])))) {
	padding: 0;
	--tabs-radius: calc(var(--s-block-radius) - var(--sugar-border-width));
}

:where(article:not(:has(> :not([role='tablist']):not([role='tabpanel']))) [role='tabpanel']) {
	padding: 0 var(--sugar-spacing-inline) var(--sugar-spacing-block);
}

:where(
		article:not(:has(> :not([role='tablist']):not([role='tabpanel'])))
			> [role='tablist']:first-child
			> [role='tab']:first-child
	) {
	border-start-start-radius: var(--tabs-radius);
}

:where(
		article:not(:has(> :not([role='tablist']):not([role='tabpanel'])))
			> [role='tablist']:first-child
			> [role='tab']:last-child
	) {
	border-start-end-radius: var(--tabs-radius);
}