.tip-style(@background; @color; @style) {
    &.co-@{style} {
        .con {
            color: @color;
            background-color: @background;
        }

        &.tip-placement-top {
            .arrow {
                border-right-color: @background;
                border-bottom-color: @background;
                box-shadow: none;
            }
        }

        &.tip-placement-bottom {
            .arrow {
                border-left-color: @background;
                border-top-color: @background;
                box-shadow: none;
            }
        }

        &.tip-placement-right {
            .arrow {
                border-bottom-color: @background;
                border-left-color: @background;
                box-shadow: none;
            }
        }

        &.tip-placement-left {
            .arrow {
                border-top-color: @background;
                border-right-color: @background;
                box-shadow: none;
            }
        }
    }
}

mor-tip{
    position: fixed;
    display: none;
    font-size: @fontSize*0.75;

    &.has-content{
        display: block;
    }

    .con {
        padding: @fontSize*0.5;
        text-align: center;
        border-radius: @borderRadius;
        word-break: break-all;
        line-height: 1.2;
    }

    .setup-tip(3px);

    &.only-has-text{
        .con{
            padding: @fontSize*0.1875 @fontSize*0.5;
        }
    }

    .tip-style(@colorTheme, @colorWhite, t);
    .tip-style(@colorLightTheme, @colorWhite, lt);
    .tip-style(@colorDarkTheme, @colorWhite, dt);

    .tip-style(@colorSuccess, @colorWhite, s);
    .tip-style(@colorWarning, @colorWhite, w);
    .tip-style(@colorDanger, @colorWhite, d);
    .tip-style(@colorPrimary, @colorWhite, p);
    .tip-style(@colorMinor, @colorWhite, m);
    .tip-style(@colorInfo, @colorWhite, i);

    .tip-style(@colorBlack, @colorWhite, bk);

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

        .tip-style(@@colorName, if((@value > 5), @colorWhite, @colorBlack), ~'n@{value}');
    });

    .tip-style(@colorWhite, @colorBlack, wh);

    // default status
    &{
        .co-t;
    }
}