@import '../variables.less';
@import '../mixins.less';

.toc {
	position: fixed;
	z-index: -1; // So that it is below float objects in content
	top: @header-height;
	left: 0;
	max-width: 450px;
	padding: @margin-side;
	color: var( --color-base--subtle );
	font-size: @ui-menu-text;

	&::-webkit-scrollbar {
		width: 0; // Hide bar on toc
	}

	&title {
		h2 {
			margin: 0;
			color: var( --color-base--subtle ) !important;
			font-weight: normal;
			letter-spacing: 0.75px;
		}
	}

	&toggle {
		&span {
			display: none;
		}

		&checkbox:checked ~ ul {
			display: block !important; // Force display
		}
	}

	li {
		border-left: 2px solid var( --border-color-base--darker );

		&.toclevel-2,
		&.toclevel-3,
		&.toclevel-4,
		&.toclevel-5,
		&.toclevel-6 {
			margin-left: 10px;
		}
	}

	li.active {
		border-color: var( --color-primary );
		color: var( --color-primary );

		> a {
			color: inherit !important;
		}

		a,
		li {
			color: var( --color-base );
		}
	}

	a {
		display: block;
		padding: 0.25rem 0 0.25rem 10px;
		color: var( --color-base--subtle );

		&:hover {
			color: var( --color-base );
		}

		&:active {
			color: var( --color-base--subtle );
		}
	}

	&number {
		.mixin-screen-reader-text;
	}

	ul {
		margin: 0 !important;
		list-style: none;
	}

	> ul {
		position: relative;
		z-index: 2;
		display: block;
		overflow: visible auto;
		max-width: ~'calc( (100vw - '@page-width + @margin-side * 4 ~' ) / 2 )';
		max-height: ~'calc( 100vh - '@header-height * 2 + @margin-side * 4 ~' )';
		margin: @content-margin-top * 0.75 0 0 0 !important;
		font-weight: 450;
		overscroll-behavior: contain;
	}
}

@media ( max-width: @screen3 ) {
	.toc {
		z-index: 10;
		height: 100%;
		padding: 0;
		margin-top: -@header-height;
		transform: translateX( -100% );

		&:before,
		&:after {
			content: unset; // Disable fade
		}

		&toggle {
			&span {
				display: block;
				font-size: 0 !important;
			}

			&label {
				position: fixed;
				z-index: 7;
				right: -100vw;
				bottom: 0;
				display: block;
				width: 39px;
				height: 56px;
				padding: 0 @margin-side / 2;
				margin: @margin-side;
				background-color: var( --background-color-dp-06 );
				border-radius: 100%;
				.boxshadow(4);

				&:hover {
					background-color: var( --background-color-dp-12 );
					.boxshadow(5);

					&:before {
						opacity: @opacity-icon-active;
					}
				}

				&:active {
					background-color: var( --background-color-dp-02 );
				}

				&:before {
					.resource-loader-icon;
					display: block;
					opacity: @opacity-icon;
				}
			}

			&checkbox:not( :checked ) ~ ul {
				transform: translateX( -300px - @margin-side );
			}
		}

		&title h2 {
			display: none;
		}

		> ul {
			display: block !important; // So that animation is visible
			max-width: none;
			height: 100%;
			max-height: ~'calc( 100vh - '@header-height + @margin-side * 3 ~')';
			padding: @header-height + @margin-side @margin-side @margin-side * 2 @margin-side / 2 !important; // More scroll spaces
			border-color: transparent;
			margin: 0 !important;
			background: var( --background-color-dp-16 );
			border-radius: 0 @border-radius-large @border-radius-large 0;
			transform: translateX( 100% );
			transition: @transition-transform;
			.boxshadow(3);
		}
	}

	.skin-citizen-dark {
		.toc {
			&togglelabel {
				&:before {
					filter: invert( 1 );
				}
			}
		}
	}
}