@import 'commons';

$m-tree-node--height: 40px;
$m-tree-node--child-indentation: 20px;

.m-tree-node {
    color: $m-color-text;
    margin-left: $m-tree-node--child-indentation / 2;
    position: relative;

    .m-tree-node {

        &::before,
        &::after {
            content: '';
            position: absolute;
            left: -$m-tree-node--child-indentation;
            background-color: $m-color-interactive;
        }

        &::before {
            top: 15px; // Magic number
            width: $m-tree-node--child-indentation;
            height: 1px;
        }

        &::after {
            top: -25px; // Magic number
            width: 1px;
            height: $m-tree-node--height + 5px;
        }
    }

    .m-tree-node.m--has-children {
        &::before {
            top: $m-tree-node--child-indentation;
        }
    }

    &:not(.m--has-children)::after {
        height: $m-tree-node--child-indentation * 2;
        top: -25px; // Magic number
    }

    & + &,
    &__children > & {
        margin-top: 6px;
    }

    &__auto-select-button {
        position: absolute;
        left: $m-min-width + 10px;
        top: $m-tree-node--height / 4;
        height: $m-tree-node--height / 2;
        background: red;

        &.m--is-selected {
            background: blue;
        }
    }

    &__warning-icon {
        margin-left: $m-space-xs;
        color: $m-color-warning;
    }

    &__item {
        transition-property: background-color, background-image, color, border;
        transition-duration: $m-transition-duration;
        transition-timing-function: ease;
        padding-left: $m-tree-node--child-indentation;
        padding-right: $m-tree-node--child-indentation;
        width: $m-min-width;
        height: $m-tree-node--child-indentation * 2;
        display: flex;
        align-items: center;
        position: relative;
        outline: none;
    }

    &__item-label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: $m-line-height;
    }

    &__item-check {
        position: absolute;
        width: $m-tree-node--child-indentation;
        height: 100%;
        right: 0;

        &::before,
        &::after {
            transition-property: opacity, background-color;
            transition-duration: $m-transition-duration;
            transition-timing-function: linear;
            position: absolute;
            content: '';
            background: $m-color-white;
            border-radius: 2px;
        }

        &::before {
            transform: rotate(-50deg);
            right: 16px;
            bottom: 16px;
            width: 10px;
            height: 2px;
        }

        &::after {
            transform: rotate(-30deg);
            right: 24px;
            bottom: 12px;
            width: 2px;
            height: 6px;
        }
    }

    &__child {
        margin-left: $m-tree-node--child-indentation;
    }

    &__child-empty {
        margin-left: 0;
        margin-top: $m-space-sm;
        color: $m-color-text;
    }

    &.m--has-file-icons.m--has-file-icons .m-tree-node__item {
        padding-left: $m-tree-node--height + 10px;
    }

    &:not(.m--has-children) {
        &:not(.m--is-disabled):not(.m--is-read-only) {
            > .m-tree-node__item:not(.m--no-hover) {
                &:hover {
                    background: $m-color-information;
                    color: $m-color-interactive;

                    .m-tree-node__item-check::before,
                    .m-tree-node__item-check::after {
                        background: $m-color-interactive;
                    }
                }

                &:active {
                    background: $m-color-interactive-dark;
                    color: $m-color-white;

                    .m-tree-node__item-check::before,
                    .m-tree-node__item-check::after {
                        background: $m-color-white;
                    }
                }
            }

            &:not(.m--is-selected)>.m-tree-node__item:not(.m--no-hover) {
                &:focus:not(:active) {

                    .m-tree-node__item-check::before,
                    .m-tree-node__item-check::after {
                        background: $m-color-interactive;
                    }
                }
            }
        }

        &:not(.m--is-disabled):not(.m--is-read-only):not(.m--is-with-checkboxes) {
            > .m-tree-node__item {
                cursor: pointer;

                &:focus {
                    border-color: $m-color-interactive;
                }
            }
        }

        > .m-tree-node__item {
            background: $m-color-white;
            color: $m-color-interactive;
            height: 32px; // Magic number
            width: auto;
            display: inline-flex;
            border: 1px solid $m-color-white;
            border-radius: $m-tree-node--child-indentation;
            padding-right: $m-tree-node--child-indentation * 2;
        }
    }

    &.m--has-children {
        &:not(.m--is-disabled) {
            > .m-tree-node__item:not(.m--no-hover) {

                &:hover,
                &:focus {
                    background: linear-gradient(to right, $m-color-information, rgba(255, 255, 255, 0));
                    cursor: pointer;
                }
            }
        }
    }

    &.m--has-children>&__item {
        font-weight: $m-font-weight-semi-bold;
        cursor: pointer;
    }

    &.m--is-read-only>&__item {
        color: $m-color-text;
    }

    &.m--is-disabled>&__item {
        color: $m-color-text;
        cursor: default;
        background: $m-color-white;
    }

    &.m--is-selected {
        &:not(.m--has-children):not(.m--is-read-only):not(.m--is-disabled) {
            > .m-tree-node__item {
                background-color: $m-color-interactive;
                color: $m-color-white;
            }

            .m-tree-node__item-check::before,
            .m-tree-node__item-check::after {
                background: $m-color-white;
            }
        }

        .m-tree-icon::before,
        .m-tree-icon::after {
            background-color: $m-color-white;
        }
    }

    .m-tree-node__children.m--has-line-extension::before {
        content: '';
        position: absolute;
        left: -$m-tree-node--child-indentation;
        top: 0;
        bottom: 0;
        width: 1px;
        background-color: $m-color-interactive;
    }
}

.m-tree-node.m--is-with-checkboxes {
    &:not(.m--has-children) > .m-tree-node__item {
        color: $m-color-text;
    }

    &.m--is-selected.m--has-children > .m-tree-node__item {
        background-color: $m-color-grey-lighter;
        color: $m-color-text;
    }

    &.m--is-disabled.m--has-children {
        &::before {
            background-color: $m-color-interactive;
        }

        > .m-tree-node__item {
            border-color: $m-color-interactive;
        }
    }

    &.m--is-selected:not(.m--is-read-only) > .m-tree-node__item.m--no-hover {
        background-color: rgba(255, 255, 255, 0);
        color: $m-color-text;

        &:hover,
        &:focus {
            color: $m-color-interactive;
        }
    }

    &.m--is-selected.m--is-read-only > .m-tree-node__item.m--no-hover:hover {
        cursor: default;
    }

    &:not(.m--is-disabled).m--is-selected > .m-tree-node__item.m--no-hover {
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0);
    }
}