mor-header{
    display: block;
    margin: 0.6em 0;
    vertical-align: middle;

    small{
        vertical-align: baseline !important;
    }

    &.si-xxl{
        font-size: @fontSize*3.2;
        padding-left: @fontSize*1.6;
        border-left-width: @fontSize*0.7;

        small{
            font-size: @fontSize*1.8;
            margin-left: @fontSize*1.1;
        }
    }

    &.si-xl{
        font-size: @fontSize*2.88;
        padding-left: @fontSize*1.4;
        border-left-width: @fontSize*0.7;

        small{
            font-size: @fontSize*1.44;
            margin-left: @fontSize*0.9;
        }
    }

    &.si-l{
        font-size: @fontSize*2.16;
        padding-left: @fontSize*1.2;
        border-left-width: @fontSize*0.6;

        small{
            font-size: @fontSize*1.08;
            margin-left: @fontSize*0.7;
        }
    }

    &.si-m{
        font-size: @fontSize*1.8;
        padding-left: @fontSize*1;
        border-left-width: @fontSize*0.5;

        small{
            font-size: @fontSize*0.9;
            margin-left: @fontSize*0.5;
        }
    }

    &.si-s{
        font-size: @fontSize*1.44;
        padding-left: @fontSize*0.8;
        border-left-width: @fontSize*0.3;

        small{
            font-size: @fontSize*0.72;
            margin-left: @fontSize*0.4;
        }
    }

    &.si-xs{
        font-size: @fontSize*1.26;
        padding-left: @fontSize*0.6;
        border-left-width: @fontSize*0.2;

        small{
            font-size: @fontSize*0.63;
            margin-left: @fontSize*0.3;
        }
    }

    &.si-xxs{
        font-size: @fontSize*1;
        padding-left: @fontSize*0.4;
        border-left-width: @fontSize*0.15;

        small{
            font-size: @fontSize*0.5;
            margin-left: @fontSize*0.25;
        }
    }

    &.co-t{
        color: @colorTheme;

        &.mark{
            border-left-color: @colorTheme;
        }

        &.underline{
            border-bottom-color: @colorTheme;
        }

        small{
            color: lighten(@colorTheme, 15%);
        }
    }

    &.co-lt{
        color: @colorLightTheme;

        &.mark{
            border-left-color: @colorLightTheme;
        }

        &.underline{
            border-bottom-color: @colorLightTheme;
        }

        small{
            color: lighten(@colorLightTheme, 15%);
        }
    }

    &.co-dt{
        color: @colorDarkTheme;

        &.mark{
            border-left-color: @colorDarkTheme;
        }

        &.underline{
            border-bottom-color: @colorDarkTheme;
        }

        small{
            color: lighten(@colorDarkTheme, 15%);
        }
    }

    &.co-s{
        color: @colorSuccess;

        &.mark{
            border-left-color: @colorSuccess;
        }

        &.underline{
            border-bottom-color: @colorSuccess;
        }

        small{
            color: darken(@colorSuccess, 5%);
        }
    }

    &.co-w{
        color: @colorWarning;

        &.mark{
            border-left-color: @colorWarning;
        }

        &.underline{
            border-bottom-color: @colorWarning;
        }

        small{
            color: darken(@colorWarning, 5%);
        }
    }

    &.co-d{
        color: @colorDanger;

        &.mark{
            border-left-color: @colorDanger;
        }

        &.underline{
            border-bottom-color: @colorDanger;
        }

        small{
            color: darken(@colorDanger, 5%);
        }
    }

    &.co-p{
        color: @colorPrimary;

        &.mark{
            border-left-color: @colorPrimary;
        }

        &.underline{
            border-bottom-color: @colorPrimary;
        }

        small{
            color: darken(@colorPrimary, 5%);
        }
    }

    &.co-m{
        color: @colorMinor;

        &.mark{
            border-left-color: @colorMinor;
        }

        &.underline{
            border-bottom-color: @colorMinor;
        }

        small{
            color: lighten(@colorMinor, 15%);
        }
    }

    &.co-i{
        color: @colorInfo;

        &.mark{
            border-left-color: @colorInfo;
        }

        &.underline{
            border-bottom-color: @colorInfo;
        }

        small{
            color: darken(@colorInfo, 5%);
        }
    }

    &.co-bk{
        color: @colorBlack;

        &.mark{
            border-left-color: @colorBlack;
        }

        &.underline{
            border-bottom-color: @colorBlack;
        }

        small{
            color: lighten(@colorBlack, 35%);
        }
    }

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

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

            &.mark{
                border-left-color: @@colorName;
            }

            &.underline{
                border-bottom-color: @@colorName;
            }

            small when (@value > 5) {
                color: lighten(@@colorName, @value * 2.5%);
            }

            small when (@value <= 5) {
                color: darken(@@colorName, @value * 3%);
            }
        }
    });

    &.co-wh{
        color: @colorWhite;

        &.mark{
            border-left-color: @colorWhite;
        }

        &.underline{
            border-bottom-color: @colorWhite;
        }

        small{
            color: darken(@colorWhite, 10%);
        }
    }

    &.mark{
        border-left-style: solid;
    }

    &.underline{
        border-bottom-width: 1px;
        border-bottom-style: solid;
        padding-bottom: 0.2em;
    }

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