mor-statistic{
    display: inline-block;
    padding: 0 0.4em;
    text-align: center;
    vertical-align: middle;

    .value + .label{
        margin-top: 0.3em;
    }

    .label + .value{
        margin-top: 0.3em;
    }

    .value,
    .value > span{
        line-height: 1em;
        height: 1em;
    }

    .value > span{
        display: inline-block;
        vertical-align: top !important;
    }

    .value i{
        font-size: inherit;
        vertical-align: top !important;
        line-height: 1em;
        height: 1em;
        margin-right: 0.1em;
    }

    .value img{
        vertical-align: baseline !important;
        margin-right: 0.25em;
    }

    &.horizontal .label,
    &.horizontal .value{
        display: inline-block;
    }

    &.horizontal{
        .label:last-child{
            margin-top: 0;
            margin-left: 0.2em;
        }

        .value{
            margin-top: 0;
        }
    }

    &.horizontal {
        .label:first-child{
            margin-top: 0.2em;
            margin-left: 0;
        }

        .value{
            margin-top: 0;
        }
    }

    &.si-xxl {
        .value{
            font-size: @fontSize*3;

            img {
                height: @fontSize*3;
            }
        }

        .label{
            font-size: @fontSize*1.4;
        }
    }

    &.si-xl {
        .value{
            font-size: @fontSize*2.4;

            img {
                height: @fontSize*2.4;
            }
        }

        .label{
            font-size: @fontSize*1.3;
        }
    }

    &.si-l {
        .value{
            font-size: @fontSize*2;

            img {
                height: @fontSize*2;
            }
        }

        .label{
            font-size: @fontSize*1;
        }
    }

    &.si-m {
        .value{
            font-size: @fontSize*1.8;

            img {
                height: @fontSize*1.8;
            }
        }

        .label{
            font-size: @fontSize*0.8125;
        }
    }

    &.si-s {
        .value{
            font-size: @fontSize*1.6;

            img {
                height: @fontSize*1.6;
            }
        }

        .label{
            font-size: @fontSize*0.8125;
        }
    }

    &.si-xs {
        .value{
            font-size: @fontSize*1.4;

            img {
                height: @fontSize*1.4;
            }
        }

        .label{
            font-size: @fontSize*0.75;
        }
    }

    &.si-xxs {
        .value{
            font-size: @fontSize*1.2;

            img {
                height: @fontSize*1.2;
            }
        }

        .label{
            font-size: @fontSize*0.75;
        }
    }

    &.co-t{
        .value{
            color: @colorTheme;
        }

        .label{
            color: lighten(@colorTheme, 10%);
        }
    }

    &.co-lt{
        .value{
            color: @colorLightTheme;
        }

        .label{
            color: lighten(@colorLightTheme, 10%);
        }
    }

    &.co-dt{
        .value{
            color: @colorDarkTheme;
        }

        .label{
            color: lighten(@colorDarkTheme, 10%);
        }
    }

    &.co-s{
        .value{
            color: @colorSuccess;
        }

        .label{
            color: darken(@colorSuccess, 6%);
        }
    }

    &.co-w{
        .value{
            color: @colorWarning;
        }

        .label{
            color: darken(@colorWarning, 6%);
        }
    }

    &.co-d{
        .value{
            color: @colorDanger;
        }

        .label{
            color: darken(@colorDanger, 6%);
        }
    }

    &.co-p{
        .value{
            color: @colorPrimary;
        }

        .label{
            color: darken(@colorPrimary, 6%);
        }
    }

    &.co-m{
        .value{
            color: @colorMinor;
        }

        .label{
            color: darken(@colorMinor, 6%);
        }
    }

    &.co-i{
        .value{
            color: @colorInfo;
        }

        .label{
            color: darken(@colorInfo, 6%);
        }
    }

    &.co-bk{
        .value{
            color: @colorBlack;
        }

        .label{
            color: lighten(@colorBlack, 30%);
        }
    }

    each(range(11), {
        @colorName : 'colorNeutral@{value}';

        &.co-n@{value}{
            .value{
                color: @@colorName;
            }

            .label when (@value > 5){
                color: lighten(@@colorName, @value%);
            }

            .label when (@value <= 5){
                color: darken(@@colorName, @value * 1.5%);
            }
        }
    });

    &.co-wh{
        .value{
            color: @colorWhite;
        }

        .label{
            color: darken(@colorWhite, 5%);
        }
    }

    &.st-normal{}

    &.st-apparent{
        animation-name: apparent;
        animation-duration: 1s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }

    // default status
    &{
        .si-m;
        .co-bk;
        .st-normal;
    }
}