/**
 * Platform Codes – Tabs component
 * Active indicator matches label width (icon + text), not full button.
 * Reference: https://design.dga.gov.sa/guidelines/components/navigational/tabs
 * Uses CSS logical properties for RTL/LTR.
 */

:root {
	--tabs-indicator-height: 3px;
	--tabs-indicator-color: #198754;
	--tabs-indicator-color-hovor: #9f9f9f;
	--tabs-indicator-offset: 6px;
	--tabs-indicator-radius: 0px;
	--spacing-xxs: 0.25rem;
}

/* Disable full-button indicator so we draw it on the label only */
.datagrid-tabs button.tab::after {
	display: none;
}

/* Label wrapper: shrink-wraps icon + text so indicator width = label width */
.tab__label {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xxs);
	position: relative;
	width: fit-content;
	transition: all 2s ease-in-out;
}

.tab .tab__label::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-inline-end: 0;
	bottom: calc(-1 * var(--tabs-indicator-offset));
	height: var(--tabs-indicator-height);
	background: transparent;
	border-radius: var(--tabs-indicator-radius);
	z-index: 1;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease, background 0.25s ease;
}

.tab.active .tab__label::after {
	background: var(--tabs-indicator-color);
	transform: scaleX(1);
}

.tab:hover .tab__label::after {
	background: var(--tabs-indicator-color-hovor);
	transform: scaleX(1);
}

.tab .tab__label::after {
	transform-origin: center;
}


.tab__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.tab__text {
	white-space: nowrap;
}

.tab__count {
	white-space: nowrap;
}

/* Focus visible: ensure outline doesn't conflict with indicator */
.tab:focus {
	outline: none;
}

.tab:focus-visible {
	/*outline: 2px solid var(--tabs-indicator-color);*/
	outline-offset: 2px;
}