/*
 * Tabs "Timeline" / "Timeline 2" → chronology ribbon (option of the Tabs element).
 * Only for .ip-tl and not in Accordion state, so Impreza's own Timeline styles stay untouched otherwise.
 */

.w-tabs.ip-tl:not(.accordion) > .w-tabs-list {
	display: flex;
	align-items: center;
	gap: 1rem;
}

/* The line is drawn on the list (not on the scrolling row), so it stays put while dots scroll */
.w-tabs.ip-tl:not(.accordion) > .w-tabs-list::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	margin-top: -1px;
	border-color: inherit;
	border-top-width: 2px;
	border-top-style: solid;
}
.w-tabs.ip-tl.style_timeline2:not(.accordion) > .w-tabs-list::before {
	margin-top: 0;
	border-top-width: 1px;
	border-top-style: dashed;
}

.w-tabs.ip-tl:not(.accordion) > .w-tabs-list > .w-tabs-list-h {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}
.w-tabs.ip-tl:not(.accordion) > .w-tabs-list > .w-tabs-list-h::-webkit-scrollbar {
	display: none;
}
.w-tabs.ip-tl:not(.accordion) > .w-tabs-list > .w-tabs-list-h::before {
	display: none;
}

/* Tab = transparent cell, the dot is its ::before */
.w-tabs.ip-tl:not(.accordion) > .w-tabs-list > .w-tabs-list-h > .w-tabs-item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 0 var(--ip-tl-gap, 80px);
	width: auto;
	min-width: var(--ip-tl-gap, 80px);
	height: calc(var(--ip-tl-active-size, 30px) + 8px);
	line-height: normal;
	margin: 0;
	padding: 0;
	overflow: visible;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
}
.w-tabs.ip-tl:not(.accordion) > .w-tabs-list > .w-tabs-list-h > .w-tabs-item::before {
	content: '';
	flex-shrink: 0;
	width: var(--ip-tl-dot-size, 16px);
	height: var(--ip-tl-dot-size, 16px);
	border-radius: 50%;
	background: var(--ip-tl-dot-color, var(--color-content-border));
	transition: width .2s, height .2s, background .2s;
}
.w-tabs.ip-tl:not(.accordion) > .w-tabs-list > .w-tabs-list-h > .w-tabs-item:hover::before,
.w-tabs.ip-tl:not(.accordion) > .w-tabs-list > .w-tabs-list-h > .w-tabs-item:focus-visible::before {
	background: var(--ip-tl-active-color, var(--color-content-primary));
}
.w-tabs.ip-tl:not(.accordion) > .w-tabs-list > .w-tabs-list-h > .w-tabs-item.active::before {
	width: var(--ip-tl-active-size, 30px);
	height: var(--ip-tl-active-size, 30px);
	background: var(--ip-tl-active-color, var(--color-content-primary));
}

/* Tab title / icon: hidden on the line, still read by screen readers */
.w-tabs.ip-tl:not(.accordion) > .w-tabs-list > .w-tabs-list-h > .w-tabs-item > * {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.w-tabs.ip-tl:not(.accordion) > .w-tabs-list > .ip-tl-arrow {
	flex-shrink: 0;
	position: relative;
	z-index: 1;
	margin: 0;
}
.w-tabs.ip-tl:not(.accordion) > .w-tabs-list > .ip-tl-arrow:disabled {
	opacity: .35;
	cursor: default;
	pointer-events: none;
}

/* Short vertical tick from the line to the active record */
.w-tabs.ip-tl.ip-tl--tick:not(.accordion) > .w-tabs-sections::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	height: 2rem;
	border-left: 1px solid var(--color-content-border);
}