@use "@gloria/a11y/_mixins.scss" as *;

.c-nav-tree {
	font-size: var(--font-size-sm);
	line-height: var(--line-height-base);
	color: var(--color-secondary-700);

	&--mobile {
		.c-nav-tree__chevron {
			transform: translate(-150%, -50%) rotate(0deg);
		}

		.c-nav-tree__wrapper {
			&:has( + .c-nav-tree__nested-list:not(.c-nav-tree__nested-list--hidden)) .c-nav-tree__chevron {
				transform: translate(-150%, -50%) rotate(90deg);
			}
		}
	}

	> li > ul {
		.c-nav-tree__link,
		.c-nav-tree__wrapper {
			padding-left: calc(var(--spacing-6) + var(--spacing-3) * var(--level, 1));
		}
	}

	&__link,
	&__wrapper {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding: var(--spacing-1-5) var(--spacing-3) var(--spacing-1-5) var(--spacing-6);
	}

	&__link {
		transition:
			background-color var(--duration-normal) var(--cbuc-cubic-out),
			color var(--duration-normal) var(--cbuc-cubic-out),
			border-color var(--duration-ultra-fast) var(--smoothstep),
			box-shadow var(--duration-ultra-fast) var(--smoothstep);

		@include a11y-keyboard-focus-ring(false, true);

		&:hover,
		&--active {
			background-color: var(--color-primary-100);
			color: var(--color-primary-500)
		}

		&--active {
			box-shadow: -2px 0px 0px 0px var(--color-primary-300) inset;
		}
	}

	&__wrapper {
		width: 100%;
		cursor: pointer;
		transition:
				background-color var(--duration-normal) var(--cbuc-cubic-out),
				color var(--duration-normal) var(--cbuc-cubic-out);

		@include a11y-keyboard-focus-ring(false, true);

		&:hover {
			background-color: var(--color-primary-100);
			color: var(--color-primary-500)
		}

		&:has( + .c-nav-tree__nested-list:not(.c-nav-tree__nested-list--hidden)) .c-nav-tree__chevron {
			transform: translate(-125%, -50%) rotate(90deg);
		}
	}

	&__chevron {
		position: absolute;
		top: 50%;
		transform: translate(-125%, -50%) rotate(0deg);
		transition: transform var(--duration-normal) var(--cbuc-cubic-out);
		color: var(--color-secondary-700);
	}

	&__nested-list {
		overflow: hidden;
		transition: height var(--duration-normal) var(--smootherstep);

		&--hidden {
			height: 0;
		}
	}

	&__badges {
		display: flex;
		flex-wrap: nowrap;

		.c-badge {
			margin-left: var(--spacing-1);
		}
	}

	&__sub-group-title {
		text-align: left;
	}
}
