@use "sass:list";
@use "../../../bulma/sass/utilities" as bulma-utilities;
@use "../../../bulma/sass/elements/tag" as bulma-tag;

.tag {
    .has-ellipsis {
        max-width: 10em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .delete, &.is-delete, &.has-delete-icon {
        @each $name, $pair in bulma-tag.$tag-colors {
            $color: list.nth($pair, 1);
            &.is-#{$name} {
                background: var(--#{$name});

                &:hover {
                    text-decoration: none;
                }
            }
        }
    }

    &.has-delete-icon {
        padding: 0;

        .icon:first-child:not(:last-child) {
            margin-right: 0;
            margin-left: 0;
        }
    }
}