public-ui-kolibri

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

@layer kol-theme-component {
	.kol-tree-item {
		$root: &;

		&__children {
			display: flex;
			flex-direction: column;
		}

		&__link {
			border-radius: 4px;
			display: block;
			border: 2px solid transparent;

			&:hover,
			&:focus-within {
				background-color: var(--color-sky);
				border: 2px solid var(--color-blue);

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

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

				.kol-link {
					color: var(--color-black);
					background-color: var(--color-yellow);
				}
			}

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

				&:focus {
					color: var(--color-black);
				}
			}
		}

		&__toggle-button {
			color: var(--color-blue);
		}

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

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