:host(:not([hidden])) {
	display: block;
}

.ui5-timeline-root {
	padding: var(--_ui5_tl_padding);
	box-sizing: border-box;
	overflow: hidden;
}

.ui5-timeline-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

:host([layout="Horizontal"]) .ui5-timeline-list-item.ui5-timeline-list-growing {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-inline-start: 0.625rem;
	align-items: center;
	min-width: 3.375rem;
}
:host([layout="Vertical"]) .ui5-timeline-list-item.ui5-timeline-list-growing {
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	align-items: center;
}

:host([layout="Horizontal"]) .ui5-timeline-end-marker {
	margin: -0.625rem;
}

:host([layout="Vertical"]) .ui5-timeline-list {
	display: flex;
	flex-direction: column;
}

.ui5-timeline-list-item {
	margin-bottom: var(--_ui5_tl_li_margin_bottom);
}

.ui5-timeline-list-item:last-child {
	margin-bottom: 0;
}

:host([layout="Horizontal"]) .ui5-timeline-list {
	white-space: nowrap;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
}

:host([layout="Horizontal"]) .ui5-timeline-list-item {
	display: inline-block;
	margin-inline-start: var(--_ui5_tl_li_margin_bottom);
}

/* Scroll container */
:host([layout="Horizontal"]) .ui5-timeline-scroll-container {
	overflow-x: auto;
	overflow-y: hidden;
	/* The padding values of the parent container are added to the size of scroll container */
	width: calc(100% + var(--_ui5_timeline_scroll_container_offset));
}

:host([layout="Vertical"]) .ui5-timeline-scroll-container {
	height: 100%;
	width: 100%;
	overflow: auto;
}

.ui5-timeline-scroll-container {
	display: flex;
	flex-direction: column;
}

:host([loading]) .ui5-timeline-growing-button-busy-indicator:not([_is-busy]) {
	display: none;
}

.ui5-timeline-root,
.ui5-timeline-busy-indicator {
	width: 100%;
	height: 100%;
	position: relative;
	box-sizing: border-box;
}

:host([growing="Scroll"]) .ui5-timeline-end-marker {
	/* Ensure the list-end-marker has a block property to always be stretched and "visible" on the screen */
	display: inline-block;
}

/* Header area — wraps header + info-bar slots above the items */
.ui5-timeline-header-area {
	flex-shrink: 0;
	width: 100%;
	background: var(--sapBackgroundColor);
	margin-block-end: 1rem;
}

.ui5-timeline-header,
.ui5-timeline-info-bar {
	flex-shrink: 0;
}

/* Sticky header — pins to the top in vertical layout and to the inline-start in horizontal layout */
:host([sticky-header]) .ui5-timeline-header-area {
	position: sticky;
	top: 0;
	inset-inline-start: 0;
	z-index: 2;
}