@import 'commons';

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

.m-tree {
    overflow: auto;

    &__error {
        .m-icon {
            color: $m-color-error-dark;
        }

        + .m-tree__content {
            margin-top: $m-space-sm;
        }
    }

    &__content {
        margin-top: 1px;
        margin-bottom: 1px;
        padding-left: $m-tree-node--child-indentation;
        list-style: none;

        /deep/ .m-tree-node {
            &__children {
                padding: 0;
                list-style: none;
            }
        }

        > .m-tree-node:only-child {
            margin-left: 0;

            &::before {
                content: none;
            }
        }

        > .m-tree-node:not(.m--is-single) /deep/>.m-tree-node__item {
            &::before {
                content: "";
                position: absolute;
                left: -$m-tree-node--child-indentation;
                top: 50%;
                width: $m-tree-node--child-indentation;
                height: 1px;
                background-color: $m-color-interactive;
            }
        }

        > .m-tree-node:not(.m--is-single) {
            &::after {
                content: "";
                position: absolute;
                left: -$m-tree-node--child-indentation;
                top: -26px; // Magic number
                width: 1px;
                bottom: 0;
                background-color: $m-color-interactive;
            }

            &:first-child::after {
                top: $m-tree-node--child-indentation;
            }

            &.m-tree-node.m--has-children:last-child::after {
                height: 46px; // Magic number
            }
        }

        > .m-tree-node:not(.m--is-single):not(.m-tree-node.m--has-children) {
            &::after {
                top: -23px; // Magic number
            }
        }

        > .m-tree-node:first-child:not(.m--is-single):not(.m-tree-node.m--has-children) {
            &::after {
                top: 16px; // Magic number
                height: 39px; // Magic number
            }

            + .m-tree-node:not(.m--is-single)::after {
                top: -22px; // Magic number
            }

            + .m-tree-node:last-child:not(.m--is-single)::after {
                display: none;
            }
        }
    }
}