.tag {
    position      : relative;
    display       : inline-flex;
    align-items   : center;
    background    : var(--slate-100);
    padding       : 5px 10px 6px;
    font-weight   : 600;
    color         : var(--slate-600);
    border-radius : var(--rounded-default);
    border        : 1px solid var(--slate-100);
    font-size     : .875rem;
    line-height   : 1;
    white-space   : nowrap;
}

.tag.success {
    color: var(--emerald-500)
}

.tag.success.befored:before {
    background-color: var(--emerald-500)
}

.tag.danger {
    color: var(--red-500)
}

.tag.danger.befored:before {
    background-color: var(--red-500)
}

.tag.bg-success {
    background-color: var(--emerald-50)
}

.tag.bg-danger {
    background-color: var(--red-50) !important
}

.tag.befored {
    padding-left: 25px
}

.tag.befored:before {
    position: absolute;
    content: "";
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
    width: 7px;
    height: 7px;
    border-radius: var(--rounded-full)
}

.tag svg {
    width: 14px;
    height: 14px;
    margin-right: 7px;
}

.tag.red {
    color            : var(--red-500);
    background-color : var(--red-100);
}
.tag.orange {
    color            : var(--orange-500);
    background-color : var(--orange-100);
}
.tag.blue {
    color            : var(--blue-500);
    background-color : var(--blue-100);
}
.tag.green {
    color            : var(--success);
    background-color : rgba(var(--success-rgb), 0.2);
}