@import 'nodes.less';
@import 'canvas/documentElement.less';
@import 'canvas/genericElement.less';

#rng-module-documentCanvas {
   height: 100%;
}

#rng-module-documentCanvas-mainArea {
   height: 100%;
   margin-bottom: 20px;
}

#rng-module-documentCanvas-contentWrapper {
    border-color: #ddd;
    border-style: solid;
    border-width: 1px;
    float:left;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding: 0 10px;
    
    &::-webkit-scrollbar {
        .rng-mixin-scrollbar;
    }
    &::-webkit-scrollbar-track {
        .rng-mixin-scrollbar-track;
    }
    &::-webkit-scrollbar-thumb {
        .rng-mixin-scrollbar-thumb;
    }
    &::-webkit-scrollbar-thumb:window-inactive {
        .rng-mixin-scrollbar-thumb-window-inactive;
    }
    
    .canvas-wrapper {
        outline: 0px solid transparent;
    }

    .current-text-element {
    }

    .current-node-element {
        border-color: lighten(#000, 35%);
        border-style: solid;
        border-width: 1px;
    }

    .current-node-element[wlxml-tag="span"] {
        border: none;
    }

    .highlighted-element {
        border: 1px solid lighten(#000, 15%);
    }
    
    .highlighted-element[wlxml-tag="span"] {
        border: none;
    }

    counter-reset: footnote;
}

.rng-module-documentCanvas-currentNode {
    background: #fffacd;
    border-color: grey;
    border-style:dashed;
    border-width:1px;
}

.rng-module-documentCanvas-hoveredNodeTag {
    position:absolute;
    height:20px;
    top:-20px;
    left:0;
    background: #bd362f;
    color: white;
    font-size:9px;
    font-weight: normal;
    font-style: normal;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding: 0 5px;
    text-indent: 0;
}

[document-node-element] {
    position:relative;
    border: 1px solid transparent;
}