mor-action{
    display: block;
    margin-top: @fontSize;
    vertical-align: middle;
    font-size: 0;

    &:first-child{
        margin-top: 0;
    }

    > .title{
        width: 60%;
        display: inline-block;
        vertical-align: middle;
        margin-right: -5px;

        h5{
            margin: 0;
            font-weight: 400;
        }

        .note{
            color: lighten(@colorBlack, 60%);
            line-height: 1.4em;
            width: 80%;
        }
    }

    > .action{
        width: 40%;
        display: inline-block;
        vertical-align: middle;
        font-size: @fontSize;
        padding: 0.35em 0;

        & > *{
            margin-right: 0.5em;

            &:last-child{
                margin-right: 0;
            }
        }
    }

    &.vertical{
        display: block;

        > .title{
            width: 100%;
        }

        > .action{
            display: block;
            margin: 0;
            width: 100%;
        }
    }

    &.si-xxl{
        margin-top: @fontSize*1.6;

        .title h5{
            font-size: @fontSize*1.6 !important;
        }

        .title .note{
            font-size: @fontSize*1.2;
        }
    }

    &.si-xl{
        margin-top: @fontSize*1.4;

        .title h5{
            font-size: @fontSize*1.4 !important;
        }

        .title .note{
            font-size: @fontSize*1.1;
        }
    }

    &.si-l{
        margin-top: @fontSize*1;

        .title h5{
            font-size: @fontSize*1.2 !important;
        }

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

    &.si-m{
        margin-top: @fontSize*0.9;

        .title h5{
            font-size: @fontSize*1 !important;
        }

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

    &.si-s{
        margin-top: @fontSize*0.8;

        .title h5{
            font-size: @fontSize*0.8125 !important;
        }

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

    &.si-xs{
        margin-top: @fontSize*0.6;

        .title h5{
            font-size: @fontSize*0.75 !important;
        }

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

    &.si-xxs{
        margin-top: @fontSize*0.4;

        .title h5{
            font-size: @fontSize*0.75 !important;
        }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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