@use '../tokens/index.scss' as tokens;
@use '../mixins/index.scss' as mixins;

$tree-font-size: tokens.$font-size-8 !default;
$tree-indent: tokens.$spacer-5 !default;
$tree-item-vertical-padding: tokens.$spacer-2 !default;
$tree-item-gap: tokens.$spacer-2 !default;
$tree-easing: ease-in-out !default;
$tree-transition-duration: 0.15s !default;
$tree-selected-color: tokens.$text-glow-high-contrast !default;
$tree-selected-background: tokens.$selected-background-subtle !default;
$tree-selected-font-weight: tokens.$weight-semibold !default;

.tree {
	position: relative;
	font-size: $tree-font-size;
	line-height: 1.75;

	&,
	.tree-group {
		margin-block-end: 0;
	}

	.tree-group {
		margin-inline-start: $tree-indent;
	}

	.tree-item {
		margin-block-start: $tree-item-gap;

		> .tree-group {
			display: none;
		}

		&[aria-expanded='true'] > .tree-group {
			display: block;
		}

		&.tree-leaf {
			color: tokens.$text !important;
		}

		&.is-selected {
			background-color: $tree-selected-background;
			color: $tree-selected-color !important;
			font-weight: $tree-selected-font-weight;

			@include mixins.forced-colors {
				background-color: SelectedItem;
				color: SelectedItemText !important;
				forced-color-adjust: none;
			}
		}
	}

	.tree-item.tree-leaf,
	.tree-expander {
		display: block;
		padding-inline-start: $tree-indent;
		padding-block-start: $tree-item-vertical-padding;
		padding-block-end: $tree-item-vertical-padding;
		border-radius: tokens.$border-radius;
		outline-offset: -(tokens.$focus-width) !important;
	}

	.tree-item.tree-leaf:where(:has(.icon)) {
		display: flex;

		&:hover {
			text-decoration: none;
		}

		.icon {
			flex-shrink: 0;
			align-items: baseline;
			width: 1rem;
			font-size: tokens.$font-size-9;
			line-height: 2;
		}

		> span:not(.icon) {
			padding-inline-start: tokens.$spacer-3;
		}
	}

	.tree-item:where(.tree-leaf:has(.icon)) > span:not(.icon):hover {
		text-decoration: underline !important;
	}

	// Focus: suppress outline on branch nodes, delegate to expander

	.tree-item:not(.tree-leaf) {
		outline: none !important;

		@include mixins.focus-visible {
			> .tree-expander {
				@include mixins.focus();
			}
		}
	}

	.tree-expander {
		position: relative;
		cursor: pointer;
		user-select: none;
		word-wrap: break-word;

		&::before {
			@include mixins.chevron-right;

			position: absolute;
			inset-block-start: tokens.$spacer-4;
			inset-inline-start: 0;
			inset-inline-end: auto;
			transition: transform $tree-transition-duration $tree-easing;
			border-color: tokens.$text-subtle;
			font-size: tokens.$font-size-9;
		}

		&:dir(rtl)::before {
			@include mixins.chevron-right-rtl;
		}
	}

	.tree-item:where([aria-expanded='true']) > .tree-expander {
		&::before {
			transform: mixins.$chevron-down-rotate translate(calc(mixins.$chevron-arrow-size / 2), 0);
		}

		&:dir(rtl)::before {
			transform: mixins.$chevron-down-rotate-rtl
				translate(calc(mixins.$chevron-arrow-size / 2 * -1), 0);
		}
	}
}