.ui5-dynamic-page-header-actions-root {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	.ui5-dynamic-page-header-action {
		position: relative;
		z-index: 1;
		min-width: 1.5rem;
		height: 1.5rem;
		background-color: var(--_ui5_dynamic_page_header-actions-background);
		border: 1px solid var(--sapButton_BorderColor);
		box-shadow: var(--_ui5_dynamic_page_header-actions-box-shadow);
		color: var(--_ui5_dynamic_page_header-actions-color);

	}
	.ui5-dynamic-page-header-action-pin[pressed] {
		background-color: var(--_ui5_dynamic_page_header-actions-background-pressed);
		color: var(--_ui5_dynamic_page_header-actions-color-pressed);
	}

	.ui5-dynamic-page-header-actions--wrapper {
		position: absolute;
		display: flex;
		gap: 0.5rem;
		/* We need the z-index to be lower than in the header, to avoid overlapping by snap on scroll */
		z-index: 1;

		&:before,
		&:after {
			content: "";
			position: absolute;
			top: 50%;
			transform: translate(0, -100%);
			width: 6.125rem;
			height: 0.0625rem;
			z-index: 0;
		}

		&:before {
			right: 50%;
			background: linear-gradient(to right, transparent, var(--_ui5_dynamic_page_actions-lines-color));
		}

		&::after {
			left: 50%;
			background: linear-gradient(to left, transparent, var(--_ui5_dynamic_page_actions-lines-color));
		}
	}
}