.c-tag {
    $color--bg          = $color--main;
    $color--bg-hover    = #1b68ff;

    $padding            = 12px;
    $border--radius      = 4px;

    display: inline-block;
    padding: 0 12px;
    margin-right: 5px;
    margin-bottom: 5px;
    border-radius: $border--radius;
    background-color: $color--bg;
    font-size: 12px;
    color: #fff;
    line-height: 24px;
    text-ellipsis();
    transition: .4s ease-out;

    &:hover, &:focus {
        background-color: $color--bg-hover;
        color: #fff;
        text-decoration: none;
    }

    &__inner-title {
        display: inline-block;
        padding-left: $padding;
        padding-right: 8px;
        border-radius: $border--radius 0 0 $border--radius;
        background-color: $color--bg;
        color: @color;
        line-height: @line-height;
        text-ellipsis();
        transition: @transition;

        &--link {
            &:hover, &:focus {
                background-color: $color--bg-hover;
                color: #fff;
                text-decoration: none;
            }
        }
    }

    &__close {
        padding: 8px;
        border-left: solid 1px rgba(255,255,255,.2);
        background-color: $color--bg;
        line-height: @line-height;
        cursor: pointer;
        transition: @transition;

        &:hover, &:focus {
            background-color: $color--bg-hover;
            color: #fff;
            text-decoration: none;
        }

        .o-close {
            &:hover {
                color: @color;
            }
        }
    }

    &--removable {
        flexbox(inline-flex);
        padding: 0;
        vertical-align: top;
        background-color: transparent;
    }

    &--disabled {
        background-color: #9b9b9b;
        pointer-events: none;

        &:hover, &:focus {
            background-color: @background-color;
        }
    }

}