public-ui-kolibri

@use '../mixins/to-rem' as *;

@layer kol-theme-component {
	.kol-tree-item {
		$root: &;
		--tree-item-indentation: #{to-rem(20)};

		&__link {
			display: block;
			border: 1px solid transparent;

			.kol-link {
				color: var(--color-text);
				text-align: left;
			}

			&:hover,
			&:focus-within {
				background-color: var(--color-primary-variant);
				border: 1px solid var(--color-primary);

				.kol-link {
					color: var(--color-light);
					outline-offset: 0;
				}
			}

			&--active {
				background-color: var(--color-primary);

				.kol-link {
					color: var(--color-light);
				}
			}
		}

		&__toggle-button:hover &__toggle-button-icon::part(icon) {
			transform: scale(1.6);
		}

		&__text {
			text-decoration: none;
		}
	}
}