// editor-layer-list
.editor-layer-list{
    @itemHeight: 53px;

    list-style: none;
    overflow: auto;
    max-height: @itemHeight * 5;

    li{
        @padding: 4px;

        padding: @padding 0 @padding 20px;
        height: @itemHeight;
        cursor: pointer;

        &:hover{
            background-color: #f0f0f0;
        }

        &:active{
            background-color: #e6e6e6;
        }


        .layer-thumbnail{
            position: relative;
            display: inline-block;
            width: 45px;
            height: 45px;
            overflow: hidden;
            border: 1px solid #DDD;
            background-color: #FFF;
            vertical-align: middle;

            .thumbnail-image{
                position: absolute;
                display: inline-block;
                width: 100%; height: 100%;
                top: 50%; left: 50%;
                transform: translate(-50%, -50%);
            }

            .thumbnail-text,
            .thumbnail-group{
                display: inline-block;
                width: 100%;
                height: 100%;
                font-size: 26px;
                text-align: center;
                line-height: 43px;
                font-family: -webkit-pictograph, serif;
            }

            .thumbnail-svg svg{
                width: 100%;
                height: 100%;
            }
        }

        .layer-info{
            display: inline-block;
            vertical-align: middle;
            padding-left: 12px;

            width: 160px;
            text-overflow:ellipsis;
            white-space:nowrap;
            overflow:hidden;
        }
    }
}