public-ui-kolibri

@use '../../mixins/to-rem' as *; @layer kol-theme-component { .kol-tree-item { $root: &; &__children { display: flex; flex-direction: column; } &__link { display: block; border: 2px solid transparent; &:hover, &:focus-within { background-color: var(--color-sky); border: 2px solid var(--color-yellow-120); .kol-link { color: var(--color-black); } } &--active { background-color: var(--color-yellow); font-weight: 700; .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:hover &__toggle-button-icon::part(icon) { transform: scale(1.3); } &__text { text-decoration: none; } } }