.ct-tag {
    display: inline-block;
    position: relative;
    border-radius:3px;
    border-width: 1px;
    border-style:solid;  
    padding: 0 5px;
    font-size: 12px;
    border-color: #e6e6e6;
    color: #596172;
    box-sizing: border-box;
    height: 22px;
    line-height: 20px;
    margin: 2px;
    vertical-align: middle;
    //primary
    &.ct-tag__primary{
        color: #fff;
        background-color: #007aff;
        border-color: #007aff;
        &.is-plain {
            color: #007aff;
            background-color:#cce5ff;
            border-color: #99caff;
        }
    }
    //success
    &.ct-tag__success {
        color: #fff;
        background-color: #41ae3c;
        border-color:#6ccb67;
        &.is-plain {
            color: #41ae3c;
            background-color: #82d37e;
            border-color: #82d37e;
        }
    }
    //warning
    &.ct-tag__warning {
        background-color:#f44336;
        border-color: #f44336;
        color: #fff; 
        &.is-plain {
            background-color:#fcd2cf;
            border-color: #f98e86;
            color: #f44336;
        }
    }
    //danger
    &.ct-tag__danger {
        background-color: #ee2746;
        border-color: #ee2746;
        color: #fff;
        &.is-plain {
            background-color: #fbd0d6;
            border-color: #f7a1ae;
            color: #ee2746;
        }
    }
    //info 
    &.ct-tag__info {
        background-color: #90908a;
        border-color: #90908a;
        color: #fff;
        &.is-plain {
            background-color: #e6e6e5;
            border-color: #cececa;
            color: #90908a;
        }
    }
    //text
    &.ct-tag__text {
        border:none;
        background-color: #fff;
        color: #596172;
    }
    //iconfont 
    .iconfont {
        display: inline-block;
        margin-left: 5px;
        font-size: 10px;
    }
    .ct-tag__inner {
        display: inline-block;
    }
}