@import '~styles/settings';

@import '~styles/settings';

// min-width
$abstractionList-width: 400px;
$abstractionList-heading-height: 50px;

.abstractionList-expandButton {
    z-index: 1000;
    button {
        // background: $light-accent-color !important;
    }
}
.abstractionList-expandButton-expanded {
    position: fixed;
    top: calc(#{$topbar-height} + 10px);
    // left: calc(#{$abstractionList-width} - 45px);
    right: 10px;
}
.abstractionList-expandButton-collapsed {
    position: fixed;
    top: calc(#{$topbar-height} + 10px);
    right: 10px;
}

.abstractionList-container {
    position: fixed;
    top: $topbar-height;
    bottom: 0;
    right: 0;
    width: $abstractionList-width;

    background: white;
    z-index: 100;
    transition: transform 0.2s ease;
    transform: translate3d(100%, 0px, 0px);

    border-left: $container-border;
}

.abstractionList-show {
    transform: translate3d(0px, 0px, 0px);
}

// used in the main view
@media only screen and (min-width: 1900px) {
    .abstractionList-pusher {
        margin-right: $abstractionList-width;
    }

    // .abstractionList-container {
    //     transform: translate3d(0px, 0px, 0px) !important;
    // }

    // .abstractionList-expandButton {
    //     display: none;
    // }

    // .appContainer {
    //     margin-right: $abstractionList-width;
    // }
}

.abstractionList-root {
    list-style: none;
    padding: 10px;
    font-family: lucida grande ,tahoma,verdana,arial,sans-serif;
    font-size: 1.4rem;
    width: 100%;
    height: 100%;

    overflow: auto;
}

.abstractionList-loading {

}

.abstractionList-focusButton {
    cursor: pointer;
    // color: #5e93c5;
    text-decoration: none;

    &:hover {
        opacity: 0.6;
        outline: 0; /* reset for :focus */
        cursor: pointer;
    }
}

.abstractionList-toggle {
    cursor: pointer;

}

.abstractionList-node {
    position: relative;
    margin: 3px 0;
    margin-left: 5px;

    .subtree {
        list-style: none;
        margin-left: 39px;

        border-left: 1px solid #eee;
    }

    .abstractionList-header {
        word-wrap: break-word;
        word-break: break-all;

        .abstractionList-text {
            // word-wrap: break-word;
        }
    }
}


.abstractionList-heading {
    min-height: $abstractionList-heading-height;
    // background: $abstractionSidebar-heading-background;

    border-bottom: $container-border;
    padding: 10px 10px 0;

    .title {
        font-size: 1.8rem;
        line-height: $abstractionList-heading-height;
        font-weight: bold;
    }
}

.abstractionHeader-item {
    display: inline-block;
    margin: 5px 0;
    font-size: 1.3rem;
    color: #666;
}
