.tagbadge {
    transition: all .3s ease-out;
    margin: 0.1875rem 0.3125rem 0.1875rem 0;
    padding: 0.125rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.9rem;
    display: inline-block;
    cursor: default;
    width: auto;

    i {
        font-size: 0.9rem;
        font-weight: bold;
        margin-right: 0;
        cursor: pointer;
    }
}

.selectable-cursor {
    cursor: text !important;

    i {
        cursor: text !important;
    }
}

.not-allowed-cursor {
    cursor: not-allowed !important;

    i {
        cursor: not-allowed !important;
    }
}

.clickable-cursor {
    cursor: pointer !important;

    i {
        cursor: pointer !important;
    }
}

.sm {
    font-size: 0.7rem;
    padding: 0.0625rem 0.4rem;
    margin: 0;
}

.filled {
    border: 1px solid var(--tagbadge-filled-border-color);
    color: var(--tagbadge-filled-text-color);
    background-color: var(--tagbadge-filled-bg-color);

    &.color-primary {
        --tagbadge-filled-bg-color: var(--primary-color);
        --tagbadge-filled-text-color: #fff;
        --tagbadge-filled-border-color: var(--primary-color);
    }
    &.color-secondary {
        --tagbadge-filled-bg-color: var(--text-muted-color);
        --tagbadge-filled-text-color: #fff;
        --tagbadge-filled-border-color: var(--text-muted-color);
    }
    &.color-error {
        --tagbadge-filled-bg-color: var(--error-color);
        --tagbadge-filled-text-color: #fff;
        --tagbadge-filled-border-color: var(--error-color);
    }
}

.shape-pill {
    border-radius: 999px;
    padding: 0.1875rem 0.5625rem;

    &:hover {
        background: var(--tagbadge-pill-hover-bg-color);
    }
}

.outline {
    border: 1px solid var(--tagbadge-border-color);
    color: var(--tagbadge-text-color);
    background-color: var(--tagbadge-bg-color);

    &.color-primary {
        --tagbadge-border-color: var(--primary-color);
        --tagbadge-text-color: var(--primary-color);
    }
    &.color-secondary {
        --tagbadge-border-color: var(--text-muted-color);
        --tagbadge-text-color: var(--text-muted-color);
    }
    &.color-error {
        --tagbadge-border-color: var(--error-color);
        --tagbadge-text-color: var(--error-color);
    }
}
