@use "../../wwwroot/scss/variables" as *;

.tag {
    --bb-tag-btn-close-margin-left: #{$bb-tag-btn-close-margin-left};
    --bb-tag-btn-close-width: #{$bb-tag-btn-close-width};
    --bb-tag-btn-close-height: #{$bb-tag-btn-close-height};
    --bb-tag-text-margin-left: #{$bb-tag-text-margin-left};
    --bb-tag-padding-x: #{$bb-tag-padding-x};
    --bb-tag-padding-y: #{$bb-tag-padding-y};
    --bb-tag-line-height: #{$bb-tag-line-height};
    --bb-tag-font-size: #{$bb-tag-font-size};
    --bb-tag-align: #{$bb-tag-align};
    display: inline-flex;
    padding: var(--bb-tag-padding-x) var(--bb-tag-padding-y);
    line-height: var(--bb-tag-line-height);
    font-size: var(--bb-tag-font-size);
    border-radius: var(--bs-border-radius);
    align-items: var(--bb-tag-align);
    color: var(--bs-alert-color);
    background-color: var(--bs-alert-bg);
    border: 1px solid var(--bs-alert-border-color);
    white-space: nowrap;
}

    .tag > i + .tag-text {
        margin-left: var(--bb-tag-text-margin-left);
    }

    .tag > .btn-close {
        margin-left: var(--bb-tag-btn-close-margin-left);
        width: var(--bb-tag-btn-close-width);
        height: var(--bb-tag-btn-close-height);
    }
