// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
// For licensing, see LICENSE.md.

@use 'helpers/color';
@use 'helpers/font';
@use 'helpers/globals';
@use 'helpers/spacing';

/* Global styles for tree navigation in umberto.
Note: there are also dedicated styles for API Tree and Guides & SDK Tree.
See: `_api-tree.scss` and `_guide-sdk-tree.scss`. */

.tree {
	list-style: none;

	// Make sure the filter never floats over the tree.
	padding-bottom: font.$u-line-height-base + em;

	@include globals.u-unselectable;

	// Generate styles for tree levels recursively.
	@include globals.u-responsive-tablet-plus {
		@include globals.levels( 1, 1 );
	}

	@include globals.u-responsive-tablet {
		@include globals.levels( 1, 0 );
	}

	&.guide-tree {
		opacity: 0; //prevents flickering when applying categories fold state
	}

	&.state-applied {
		opacity: 1;
		transition: opacity 0.05s
	}

	li {
		position: relative;
		cursor: pointer;
		display: block;

		&::before {
			position: absolute;
			z-index: 1;
			top: .7em;
		}

		a {
			text-decoration: none;
			color: inherit;

			&:hover {
				text-decoration: underline;

				& .tree__item__badge.tree__item__badge_new {
					/* In CSS you cannot get rid of text-decoration in children, you must hack it :( */
					text-decoration: underline;
					text-decoration-color: color.u-color( 'badge-green' );
				}
			}
		}

		.tree__item__text {
			display: inline-block;
			padding: spacing.u-spacing( -3 ) 0;
			position: relative;
			margin-right: auto;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;

			// The icon.
			&::before {
				content: '';
				position: relative;
				width: 13px;
				height: 13px;
				display: inline-block;
				margin-right: spacing.u-spacing( -2 );
				background-repeat: no-repeat;
			}
		}

		.tree__item__badge {
			margin: 0 spacing.u-spacing( -2 );
		}

		.tree__item__badge:last-of-type {
			margin-right: spacing.u-spacing( 2 );
		}

		.tree__item__wrapper {
			display: flex;
			flex-direction: row;
			align-items: center;
			flex-wrap: nowrap;
			align-content: center;
			justify-content: flex-start;
		  	margin-left: calc( -1 * #{ spacing.u-spacing( 3 ) } );

			&:hover {
				background-color: color.u-color( 'background-dark' );
			}

			&--active {
				overflow: hidden;
				background-color: color.u-color( 'background-hue' );

				&:hover {
					background-color: color.u-color( 'background-hue', -3% );
				}
			}
		}

		.tree__item-nested-list {
			height: auto;
			overflow: visible;

			&--hidden {
				height: 0;
				overflow: hidden;
			}
		}
	}

	.toggler--collapsed > ul {
		display: none;
	}

	.toggler--expanded > ul {
		display: block;
	}

	&__item {
		&--package {
			&::before{
				background-image: url( ../img/box-orange.svg );
			}
		}

		&--module {
			&::before{
				background-image: url( ../img/box-red.svg );
			}
		}

	  	&--namespace {
			&::before{
			  	background-image: url( ../img/box-brown.svg );
			}
		}

		&--folder {
			// Improving UX of collapsing nested lists.
			width: 100%;

			&::before{
				background-image: url( ../img/folder.svg );
			}
		}

		&--class {
			&::before{
				background-image: url( ../img/cog.svg );
			}
		}

		&--interface {
			&::before{
				background-image: url( ../img/arrows.svg );
			}
		}

		&--typedef {
			&::before{
				background-image: url( ../img/data.svg );
			}
		}

		&--guide,
		&--sdk {
			&::before{
				background-image: url( ../img/book.svg );
			}
		}
	}
}

/* These styles are outside the .tree scope because badges are also occasionally used in the guide content. */
.tree__item__badge {
	margin: 0 spacing.u-spacing( -3 );
	text-transform: uppercase;
	font-weight: bold;
	font-size: 10px;
	border-radius: 20px;
	/* spacing.u-spacing() lacks granularity here :( */
	padding: spacing.u-spacing( -4 ) .6em;
	vertical-align: middle;
}

.tree__item__badge .tree__item__badge__text {
	display: none;
}

.tree__item__badge_new {
	background: color.u-color( 'badge-green' );
	color: color.u-color( 'text-invert' );
}

.tree__item__badge_premium {
	background-image: url( ../img/star-in-circle.svg );
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	display: inline-block;
}
