:host .ui5-timeline-group-list-item {
	list-style: none;
}

:host([collapsed]) .ui5-timeline-group-list-item {
	display: none;
}

.ui5-tl-group-item {
	width: 100%;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	gap: 1.25rem;
}
.ui5-tlgi-root {
	display: flex;
	flex-direction: column;
	gap: var(--_ui5_timeline_tlgi_compact_root_gap, 1.25rem);
}

.ui5-tlgi-btn-root {
	display: flex;
	justify-content: space-between;
	gap: 0.125rem;
}

.ui5-tlgi-icon-placeholder {
	display: flex;
	justify-content: center;
	position: relative;
	width: 2rem;
	align-self: center;
}

:host([collapsed]) .ui5-tlgi-icon-dot {
	width: 0.375rem;
	height: 0.375rem;
	box-sizing: border-box;
	border: 0.0625rem solid var(--sapContent_NonInteractiveIconColor);
	background-color: var(--sapBackgroundColor);
	border-radius: 50%;
	margin-inline-start: 0.0625rem;
}

.ui5-tlgi-line-placeholder {
	display: flex;
	justify-content: center;
	position: relative;
	align-self: center;
	flex-grow: 1;
	margin-inline-end: 0.5rem;
	margin-inline-start: -0.9375rem;
}

:host([collapsed]) .ui5-tlgi-line {
	width: 100%;
	height: 0.0625rem;
	border-block-start: 0.0625rem dashed var(--sapContent_NonInteractiveIconColor);
}

:host([layout="Vertical"]:not(:last-child)[collapsed]) .ui5-tlgi-icon-dot::before {
	content: "";
	display: inline-block;
	background-color: var(--sapContent_ForegroundBorderColor);
	width: 0.0625rem;
	position: absolute;
	inset-block-start: 0.375rem;
	inset-inline-start: 50%;
	height: var(--_ui5_timeline_tlgi_compact_icon_before_height, calc(100% + 4.5rem));
}

:host([layout="Vertical"]:not(:last-child)[collapsed]:not([is-next-item-group])) .ui5-tlgi-icon-dot::before {
	height: var(--_ui5_timeline_tlgi_compact_icon_before_height, calc(100% + 3.75rem));
}

:host([layout="Vertical"]:not([first-item-in-timeline])[collapsed]) .ui5-tlgi-icon-dot::after {
	content: "";
	display: inline-block;
	background-color: var(--sapContent_ForegroundBorderColor);
	width: 0.0625rem;
	position: absolute;
	inset-block-start: -2rem;
	inset-inline-start: 50%;
	height: 2rem;
}

/* Horizontal */
:host([layout="Horizontal"]) .ui5-tl-group-item {
	flex-direction: row;
}

:host([layout="Horizontal"]) .ui5-tl-group-item {
	height: 100%;
}

:host([layout="Horizontal"]) .ui5-tlgi-root {
	height: var(--_ui5_timeline_tlgi_root_horizontal_height);
}

:host([layout="Horizontal"]) .ui5-tlgi-btn-root {
	flex-direction: row-reverse;
}

:host([layout="Horizontal"][collapsed]) .ui5-tlgi-btn-root,
:host([layout="Horizontal"][collapsed]) .ui5-tlgi-root {
	flex-direction: column;
	gap: 0.8275rem;
	margin-block-start: 0.4375rem;
	margin-inline-end: var(--_ui5_timeline_tlgi_horizontal_compact_root_margin_left, 0);
}

:host([layout="Horizontal"][collapsed]) .ui5-tlgi-root:last-child {
	margin-block-end: -0.4375rem;
}

:host([layout="Horizontal"][collapsed]):first-child .ui5-tlgi-btn-root {
	padding-inline-end: 2rem;
}

:host([layout="Horizontal"][collapsed]) .ui5-tlgi-icon-placeholder {
	align-self: unset;
	justify-content: unset;
}


:host([layout="Horizontal"]) .ui5-tlgi-btn {
	margin-inline-start: -0.75rem;
}

:host([layout="Horizontal"][collapsed]) .ui5-tlgi-line {
	width: 100%;
	height: calc(100% + 1rem);
	border-block-start: none;
	border-inline-start: 0.0625rem dashed var(--sapContent_NonInteractiveIconColor);
	margin-block-start: -0.8125rem;
}

:host([layout="Horizontal"]) .ui5-tlgi-line-placeholder {
	height: var(--_ui5_timeline_tlgi_line_horizontal_height);
	align-self: unset;
	margin-inline-end: 0;
	margin-inline-start: 0.25rem;
}

:host([layout="Horizontal"]:not([collapsed])) .ui5-tlgi-line-placeholder {
	display: none;
}

:host([layout="Horizontal"][collapsed]) .ui5-tlgi-root > :last-child { /* Removes the gap after the last-child, so it doesnt affect the height of wrapper containers */
	margin-block-end: -0.8275rem;
}

:host([layout="Horizontal"]) .ui5-tl-group-item {
	flex-direction: row;
}

:host([layout="Horizontal"]) .ui5-tl-group-item:last-child {
	margin-inline-end: 0.25rem;
}

:host([layout="Horizontal"]) .ui5-tlgi-root {
	flex-direction: column-reverse;
}

:host([layout="Horizontal"]) .ui5-tlgi-btn-root {
	flex-direction: row-reverse;
}

:host([layout="Horizontal"]:not(:last-child)[collapsed]) .ui5-tlgi-line-placeholder::before {
	content: "";
	display: inline-block;
	background-color: var(--sapContent_ForegroundBorderColor);
	height: 0.0625rem;
	inset-block-start: -1.0625rem;
	position: absolute;
	inset-inline-start: 0.125rem;
	width: var(--_ui5_timeline_tlgi_horizontal_line_placeholder_before_width, calc(100% + 1.5625rem));
}

:host(:not([is-next-item-group])[layout="Horizontal"]:not(:last-child)[collapsed]) .ui5-tlgi-line-placeholder::before {
	width: var(--_ui5_timeline_tlgi_horizontal_line_placeholder_before_width, calc(100% + 1.9375rem));
}