// Overrides base styling for LiquorTree
@import "@/presentation/styles/colors.scss";

.tree {
    background: $slate;
    &-node { 
        white-space: normal !important;
        > .tree-content {
            > .tree-anchor > span {
                color: $white;
                text-transform: uppercase;
                font-size: 1.5em;
            }
            &:hover {
                background: $dark-gray !important;
            }
        }
        &.selected { // When using keyboard navigation it higlights current item and its child items
             background: $gray;
            .tree-text {
                color: $black !important;
            }
        }
    }
    &-checkbox {
        &.checked {
            background: $accent !important;
            border-color: $accent !important;
        }
        &.indeterminate {
            border-color: $gray !important;
        }
        background: $dark-slate !important;
    }
    &-arrow {
        &.has-child {
            &.rtl:after, &:after {
                border-color: $white !important;
            }
        }
    }
}
