/* info */

.msp-layout-hide-right {
    .msp-entity-info {
        display: none;
    }
}

.msp-entity-info {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
    //border-top: 1px solid $default-background;
    padding-top: $control-spacing;        
    background: $control-background;
    
    .msp-entity-badge {
        position: absolute;
        width: $row-height;
        height: $row-height;
        left: 0;
        top: 0;
        border-bottom: 1px solid $border-color;
    }
    
    > div {
        position: relative;
        height: $row-height;
        line-height: $row-height;  
        > span {
            font-weight: bold;
            > span {
                display: inline-block;
                margin-left: 6px;
                font-size: 80%;
                color: $entity-tag-color;
                font-weight: normal;
            }
        }
        background: $default-background;
        border-bottom: 1px solid $border-color;
        padding: 0 ($row-height + $control-spacing);
        text-align: center;       
    }
    
    .msp-remove-entity {
        position: absolute;
        right: 0;
        top: 0;
    }
}

/* badge */

.msp-entity-badge {
    font-weight: bold;
    color: $entity-badge-font-color;
    text-align: center;
    display: table;
    cursor: default;
}

.msp-entity-badge > div {
    margin: auto;
    display: inline-block;
    display: table-cell;
    vertical-align: middle;
    
    @include non-selectable;
}

@mixin entity-bg($name, $color) {    
    .msp-entity-badge-#{$name} {
        background: $color;
    } 
}

// TypeClass = 'Root' | 'Group' | 'Data' | 'Object' | 'Visual' | 'Selection' | 'Action' | 'Behaviour'
@include entity-bg('Root', $entity-color-Root);
@include entity-bg('Group', $entity-color-Group);
@include entity-bg('Data', $entity-color-Data);
@include entity-bg('Object', $entity-color-Object);
@include entity-bg('Visual', $entity-color-Visual);
@include entity-bg('Selection', $entity-color-Selection);
@include entity-bg('Action', $entity-color-Action);
@include entity-bg('Behaviour', $entity-color-Behaviour);


.msp-entity-badge-Root {
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAACKUExURQAAAM4+K84/LM4+K5BhopJboCue1XmKi5RbpSud1R2tcolpRx2scys8Sis8Sn6SlOCFOiqYzhUYMDRPYSue1n6SlMiDTR6ncbVfNd+EOeCEOeCEOeCEORYZMMk/LH6RkxUcMhUYMSs8S32Rkyye1BUZL9+FOVpORWRSRCw8SxYYMB6tcxYZMSw9S+ECnyoAAAArdFJOUwB5/uoyc/FX9DjdS5SzyPT+acsS/fwdWEmk1NidrGb6bq+HgJY7eFVH955mjSdVAAAAn0lEQVQ4y93TyxaCIBCA4alQpFQsSs1Ku997/9drRtoxwV5Ww/m/BXAOAENc8hTonRb+3sn86OkrLfNPVgd6Ox55ezWb8KLUtr+mvLg2kjpAyguxLprbI6ORFVESobjbDSdE0ouSZrPvRQuO2BYbFGbxJmGcQ/wE9sP8nFbuNayoqS9jxT0ECey7f51E5O24Qh0uT3/HO8b+DqDUIH/SF4XSDWWIL+vnAAAAAElFTkSuQmCC)
}


.msp-entity-splash {
    //padding-left: $row-height - $entity-subtree-offset;
    
    .msp-entity-splash-general {
        //border-top-left-radius: $entity-subtree-offset;
        //border-bottom-left-radius: $entity-subtree-offset;
        padding: $info-vertical-padding $control-spacing $info-vertical-padding ($row-height + $control-spacing +  $row-height - $entity-subtree-offset);        
        position: relative;    
        background: color-lower-contrast($default-background, 4%);
        margin-bottom: $control-spacing;    
        
        .msp-icon {
            display: block;
            width: $row-height;
            height: $row-height;
            line-height: $row-height;
            position: absolute;
            text-align: center;
            left: $row-height - $entity-subtree-offset;
            top: 0;
            font-size: 80%;
        }
        
        > div {
            position: absolute;
            width: 2 * $row-height - $entity-subtree-offset;
            left: 0;
            top: 0;
            bottom: 0;
            background: $default-background;
        }
    }
    
    .msp-entity-splash-class {
        margin-bottom: 1px; //$control-spacing;
    }
    
    .msp-entity-splash-class > div:first-child {
        //border-top-left-radius: $entity-subtree-offset;
        background: color-lower-contrast($default-background, 4%);
        line-height: $row-height;
        padding-left: $row-height + $control-spacing + $row-height - $entity-subtree-offset;
        font-weight: bold;
        position: relative;
        cursor: pointer;
        
        &:hover {
            color: $hover-font-color;
        }
        
        > span {
            @include non-selectable;
            cursor: pointer;
        }
        
        > div:first-child {
            position: absolute;
            width: $row-height - $entity-subtree-offset;
            height: $row-height;
            left: 0;
            top: 0;
            background: $default-background;
        }
        
        > div:nth-child(2) {            
            //border-top-left-radius: $entity-subtree-offset;
            position: absolute;
            width: $row-height;
            height: $row-height;
            left: $row-height - $entity-subtree-offset;
            top: 0;
            //background-image: none;
        }
    }
    
    .msp-entity-splash-class > div:nth-child(2) {
        //@include non-selectable;
        padding: $info-vertical-padding $control-spacing $info-vertical-padding ($row-height + $control-spacing + $row-height - $entity-subtree-offset);
        margin-top: 1px;
        background: $default-background; // color-increase-contrast($msp-form-control-background, 20%);
        //font-size: 90%;
        //border-bottom-left-radius: $entity-subtree-offset;
    }
    
    // .msp-entity-splash-class-collapsed > div:first-child {
    //     //border-bottom-left-radius: $entity-subtree-offset;
    //      > div {             
    //         //border-bottom-left-radius: $entity-subtree-offset;  
    //      }
    // }
    
    .msp-entity-splash-class-expanded > div:nth-child(2) {
        display: block;   
    }
    
    .msp-entity-splash-class-collapsed > div:nth-child(2) {
        display: none;   
    }
}