// @import (reference) "../Shared/shared.less";
// @import (reference) "../Shared/DepthChart/DepthChart.less";
// @import (reference) "../Shared/Column/Column.less";


/* -ctag-title: ColumnStats;*/
/* -ctag-description: Variables local to ColumnStats;*/

@overall_score_height: 60px;
@tile_circle_diameter : 84px;

.columnStats {
    /* -ctag:
            "section,column",
            "<div ...>
                { .columnStats_graph }
                { .columnStats_content }
                { .columnStats_depthChart }
            </div>"
    */
    &:extend( .column );

    .columnStats_content {
        -ctag-tags: section,content;
        -ctag-example: "...{ .columnStats_tile }{ .columnStats_tile }{ .columnStats_tile }{ .columnStats_tile }";
        &:extend(
            .column
            .column_Content
        );
        .calc( height ,
            70% , -( @overall_score_height/2 + 10px ) );
        float: left; clear: left;
        padding: 20px 30px;

        .columnStats_tile {
            -ctag-tags: section,tile;
            -ctag-example: "...{ .tile_graph }{ .tile_label }";
            &:extend( .hand );

            width: 50%; height: 50%;
            float: left;
            position: relative;
            background-color: #fff;
            z-index: 10;

            &:hover {
                //background-color: #eee;
                //border: 3px solid #eee;
                box-shadow: 0px 0px 6px rgba(  0,0,0,.1 );
                z-index: 1000;
            }

            &.tagged_rules {
                /*<csstag tag="tile"></csstag>*/
                body.s_statDetails_tagged & {
                    border: 1px solid #eee;
                    z-index: 900;
                    &:hover {
                        box-shadow: none;
                    }
                }
            }
            &.complete_tags {
                /*<csstag tag="tile"></csstag>*/
                body.s_statDetails_complete & {
                    border: 1px solid #eee;
                    z-index: 900;
                    &:hover {
                        //box-shadow: none;
                    }
                }
            }

            &.duplicates {
                /*<csstag tag="tile"></csstag>*/
                body.s_statDetails_duplicates & {
                    border: 1px solid #eee;
                    z-index: 900;
                    &:hover {
                        box-shadow: none;
                    }
                }
            }

            .tile_graph {
                -ctag-tag: graph;
                -ctag-example: "...{ .tile_circle }";

                width: 100%;
                .calc( height , 100% , -28px );
                position: absolute;
                top: 0px; left: 0px;
                font-size: 30px;
                text-align: center;

                .tile_circle {
                    -ctag-tags: graph,unique;
                    -ctag-example: ...43%;

                    position: absolute;
                    .calc( top , 50% , -@tile_circle_diameter/2 );
                    .calc( left , 50% , -@tile_circle_diameter/2 );
                    width: @tile_circle_diameter;
                    height: @tile_circle_diameter;
                    transition: all .3s;

                    &.go {
                        font-size: 38px;
                    }

                    body.s_go & {
                        color: #0f0;
                    }
                }
            }



            .tile_label {
                -ctag-tag: graph;
                -ctag-example: "...Rule of Dogs{ .columnStats_typeBox }";

                position: absolute;
                left: 0px;
                width: 100%;
                text-align: center;
                font-size: 10px;
                bottom: 50%;
                margin-bottom: -(( @tile_circle_diameter/2 ) + 4px );

                .columnStats_typeBox {
                    -ctag-tag: placeholder;
                    -ctag-example: "...{ .tagged_incomplete_icon }";

                    position: absolute;
                    top: 0px; left: 28px;
                    width: 20px; height: 18px;
                }
            }
        }

        .extendable_tile {
            .ctag(
                "application,section",
                "...{ .tile_graph }{ .tile_label }",
                "Exentions of columnStats_tile"
            );
            &:extend(
                .columnStats
                .columnStats_content
                .columnStats_tile all
            );

            body.s_statDetails_extendable & {
                border: 1px solid #eee;
                z-index: 900;
                &:hover {
                    box-shadow: none;
                }
            }
        }
    }

    .columnStats_depthChart {
        -ctag-tag: "container";
        -ctag-example: "...";

        .calc( height , 30% , -@overall_score_height/2 );
        .calc( width , 100% , -60px );
        float: left; clear: left;
        padding: 10px 30px;
        margin: 0px 30px;
        border: 1px solid #fff;
        &:extend( .hand );

        &:hover {
            box-shadow: 0px 0px 6px rgba(  0,0,0,.1 );
        }

        body.s_statDetails_depth & {
            border: 1px solid #eee;
            z-index: 900;

            &:hover {
                //box-shadow: none;
            }
        }
    }

    .columnStats_graph {
        /*<csstag
            tags="section,footer">
            ...{ .column_logo }
        </csstag>*/
        position: relative;
        width: 100%; height: @overall_score_height;
        float:left; clear: left;

        .column_logo {
            -ctag-tag: "placeholder";
            -ctag-example: "...{ .column_logo_img }";

            @column_logo_width: 179px * .8;
            @column_logo_height: 38px * .8;

            position: absolute;
            left: 30px;
            top: 26px;

            .column_logo_img {
                -ctag-tag: "logo,graphic";
                -ctag-example: "...";

                width: @column_logo_width;
                height: @column_logo_height;
                // background-size: 50%;
                background-size: contain;
                background-image: url("logo_h_small@2x.png");
            }
        }
    }
}