/* Patterns - Navigation - Section Index */
///
.section-index {
	border-left: var(--border-size-s) solid get-border-color('neutral-5');
	display: flex;
	flex-direction: column;

	&.is--sticky {
		position: -webkit-sticky; //Fix for older iPhones
		position: sticky;
		top: var(--top-position);
	}

	&-item {
		cursor: pointer;

		&:last-child {
			margin-bottom: var(--space-none);
		}

		&.is--active {
			border-left: var(--border-size-m) solid get-border-color('primary');
			color: get-text-color('neutral-9');
			font-weight: var(--font-semi-bold);
		}
	}

	a {
		&,
		&:visited {
			border-left: var(--border-size-m) solid get-border-color('transparent');
			color: get-text-color('neutral-8');
			margin-bottom: var(--space-s);
			padding-left: var(--space-base);
		}

		&:hover {
			color: get-text-color('neutral-9');
		}
	}
}

///
.layout-native {
	.section-index {
		&.is--sticky {
			position: fixed;
			top: calc(var(--header-size) + var(--header-size-content) + var(--top-position) + var(--os-safe-area-top));
		}
	}
}

// Responsive ---------------------------------------------------------------------------
///
.android {
	.layout-native {
		.section-index {
			&.is--sticky {
				top: calc(
					var(--header-size) + var(--header-size-content) + var(--top-position) + #{android-safe-area-top()}
				);
			}
		}
	}
}

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

// Accessibility ---------------------------------------------------------------------------
///
.has-accessible-features {
	.section-index {
		a {
			&:focus {
				background-color: get-background-color('transparent');
				box-shadow: 0 0 0 3px get-background-color('focus-outer');
			}
		}
	}
}