@use '@lucca-front/scss/src/commons/utils/reset';
@use '@lucca-front/scss/src/commons/utils/namespace';

@mixin component($atRoot: namespace.$defaultAtRoot) {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	position: sticky;

	@at-root ($atRoot) {
		.tableOfContent-list {
			@include reset.list;
		}

		// Second selector to get rid of tableOfContent-list-item-action on angular component
		.tableOfContent-list-item-action,
		.tableOfContent-list-item > a {
			@include reset.button;

			border-radius: var(--pr-t-border-radius-default);
			color: var(--palettes-neutral-700);
			cursor: pointer;
			display: block;
			outline: none;
			padding: var(--components-tableOfContent-item-padding);
			position: relative;
			transition: all var(--commons-animations-durations-standard);
			text-decoration: none;
			inline-size: auto;
		}
	}
}