/* Patterns - section - SectionIndex */
////
/// @group Patterns-SectionIndex
/// Patterns - section - SectionIndex

///
.osui-section-index {
	--top-position: calc(var(--header-size) + var(--header-size-content) + var(--status-bar-height));
	display: flex;
	flex-direction: column;
	position: relative;

	&::before {
		background-color: var(--color-neutral-5);
		bottom: 0;
		content: '';
		left: 0;
		position: absolute;
		top: 0;
		width: 1px;
	}

	&.osui-section-index--is-sticky {
		position: sticky;
		top: var(--top-position);
	}
}

.osui-section-index-item {
	&,
	&:visited {
		color: var(--color-neutral-8);
		cursor: pointer;
		display: flex;
		padding-bottom: var(--space-xs);
		padding-left: var(--space-m);
		padding-top: var(--space-xs);
		position: relative;
	}

	&:hover {
		color: var(--color-neutral-9);
	}

	&--is-active {
		color: var(--color-neutral-9);
		font-weight: var(--font-semi-bold);
		&::before {
			background-color: var(--color-primary);
			bottom: 0;
			content: '';
			left: 0;
			position: absolute;
			top: 0;
			width: 2px;
		}
	}

	&__target {
		scroll-margin: var(--target-scroll-margin);
	}
}

// Accessibility -----------------------------------------------------------------
///
.has-accessible-features {
	.osui-section-index-item {
		&:focus {
			background-color: transparent;
			@include a11y-default-outline;
		}
	}
}

// OS HighContrast Enabled -------------------------------------------------------
///
.os-high-contrast {
	.osui-section-index::before {
		@include a11y-high-contrast-outline(true, var(--border-size-s), left);
	}

	.osui-section-index-item {
		&--is-active {
			&::before {
				@include a11y-high-contrast-outline(true, var(--border-size-l), left);
			}
		}
	}
}

// IsRTL -------------------------------------------------------------------------
///
.is-rtl {
	.osui-section-index {
		&::before {
			left: auto;
			right: 0;
		}
	}

	.osui-section-index-item {
		&,
		&:visited {
			padding-left: var(--space-none);
			padding-right: var(--space-m);
		}

		&--is-active {
			&::before {
				left: auto;
				right: 0;
			}
		}
	}
}

// Responsive --------------------------------------------------------------------
///
.phone {
	.osui-section-index {
		&--is-sticky {
			left: calc(var(--os-safe-area-right) + var(--space-base));
			padding: 0 var(--space-base) 0 0;
			position: fixed;
			top: var(--top-position);
			z-index: var(--layer-local-tier-1);
		}
	}

	.is-rtl {
		.osui-section-index {
			&--is-sticky {
				left: initial;
				right: calc(var(--os-safe-area-right) + var(--space-base));
				padding: 0 0 var(--space-base) 0;
			}
		}
	}
}

// Browser -----------------------------------------------------------------------

// Fixes the sticky problem on Safari 14.1
///
.safari {
	[data-block*='SectionIndex'] {
		display: contents;
	}
}