chill-bundles/src/Bundle/ChillMainBundle/Resources/public/chill/scss/badge.scss

/// mixin used in this sheet
@mixin remove_link {
    cursor: pointer;
    &:before {
        font: normal normal normal 14px/1 ForkAwesome;
        margin-left: 0.5em;
        content: "\f00d";  // fa-times
        color: var(--bs-danger);
        text-decoration: none;
        position: absolute;
        display: block;
        top: calc(50% - 7px);
        right: 10px;
    }
}

/*
*  SUGGESTIONS LIST - A specific list of badges used to manage suggestions (with add/remove link)
*  /!\ use bootstrap badge styles,
*      cfr. src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/_custom.scss
*/

ul.list-suggest {
    list-style-type: none;
    padding-left: 0;
    li > span {
        white-space: normal;
        text-align: start;
        margin-bottom: 3px;
    }
    &.cols {
        columns: 3;
    }
    &.inline {
        li {
            display: inline-block;
            margin-right: 0.2em;
        }
    }
    &.add-items {
        li {
            position: relative;
            span {
                cursor: pointer;
                padding-left: 2rem;
            }
            & > span:before {
                font: normal normal normal 14px/1 ForkAwesome;
                margin-right: 0.5em;
                content: "\f067"; // fa-plus
                color: var(--bs-success);
                position: absolute;
                display: block;
                top: 50%;
                left: .75rem;
                -webkit-transform: translateY(-50%);
                -moz-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                transform: translateY(-50%);
            }
            & span:hover {
                color: $chill-l-gray;
            }
        }
    }
    &.remove-items {
        li {
            position: relative;
            span {
                display: block;
                padding-right: .75rem;
                @include remove_link;
            }
        }
    }
}

/// manage remove link if it isn't a list but a title
/// (cfr. in Vue AccompanyingCourseWorkEdit)
div.item-title {
    span {
        display: block;
        position: relative;
        padding: 0.5em 0.8em;
        background-color: $chill-llight-gray;
        border-radius: .25rem;
        &.removable {
            @include remove_link;
        }
    }
}