// @import (reference) "../shared.less";
// // @import (reference) "../../ColumnStats/ColumnStats.less";

.depthChart {
    /*<csstag tag="visualization">
        <div ...>
            { .depthChart_Column }
            { .depthChart_Column }
            { .depthChart_Column }
            { .depthChart_Column }
            { .depthChart_Column }
            { .depthChart_Column }
            { .depthChart_Column }
            { .depthChart_title }
        </div>
    </csstag>*/
    width: 100%; height: 100%;
    position: relative;

    .depthChart_title {
        /*<csstag tag="label">
            <div ...>
                chart of bars...
            </div>
        </csstag>*/
        width: 100%;
        font-size: 10px;
        color: #999;
        text-align: center;
        position: absolute;
        bottom: 0px; left: 0px;
    }

    .depthChart_Column {
        /*<csstag tag="visualization">
            <div ...>
                { .depthChart_Bar }
            </div>
        </csstag>*/
        width: 100% / 7; height: 100%;
        float: left;
        position: relative;

        .depthChart_Bar {
            /*<csstag tag="visualization">
                <div ...>
                    { .depthChart_RulesBar }
                    { .depthChart_CompsBar }
                </div>
            </csstag>*/
            .calc( width , 100% , -10px );
            .calc( height , 100% , -40px );
            margin: 0px auto;
            margin-top: 20px;
            margin-bottom: 2px;
            position: relative;

            .depthChart_CompsBar,
            .depthChart_RulesBar
            {
                width: 100%;
                position: absolute;
                bottom: 0px; left: 0px;
            }

            .depthChart_CompsBar {
                /*<csstag tag="visualization,bar">
                    <div ... style='height: 50%;'></div>
                </csstag>*/
                background-color: @csstagged-tagged-rule-color;
            }

            .depthChart_RulesBar {
                /*<csstag tag="visualization,bar">
                    <div ... style='height: 100%;'>
                        { .depthChart_label }
                    </div>
                </csstag>*/
                background-color: @csstagged-simple-rule-color;

                .depthChart_label {
                    /*<csstag tag="label">
                        <div ...>44</div>
                    </csstag>*/
                    position: absolute;
                    top: -18px; left: 0px;
                    width: 100%;
                    text-align: center;
                    font-size: 10px;
                }
            }

        }
    }

}