@import '../shared';


:host {

    user-select: none;

    width: 100%;
    display: block;
    
    font();

}

#row { 

}

#comment { 

    line-height: 16px;
    user-select: text;

    background: #E0CF99;
    color: #333;
    // box-shadow: inset 0 2px 0 dark;


    box-sizing: border-box;
    overflow: hidden;
    transition: height 0.15s ease;
    

    position: absolute;
    z-index: 999;
    pointer-events: none;
    
    opacity: 0;
    transform: translate3d( 10px, 20px, 0 );

    transition: all 0.2s ease;

}

#comment.open-true { 
    
    opacity: 1;
    transform: translate3d( 10px, 0, 0 );

}

#commentInner {
    padding: padding;
}

#name {

    text-overflow: ellipsis;
    word-wrap: break-word;
    overflow: hidden;
    padding: 0 padding;
    box-sizing: border-box;
    display: inline-block;
    width: 40%;

    height: 30px;
    line-height: 30px;

    cursor: default;

    .comment-true & { 
        cursor: pointer;
    }

}

.comment-true #nameInner { 

    display: inline-block;
    border-bottom: 1px dotted light;
    
    &:after { 
        content: ' ?';
        color: light;
    }

}