@use "variables" as *;

.p-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: $color-palette-primary;
    color: $white;
    font-size: $font-size-md;
    font-weight: $font-weight-regular-bold;
    padding: $spacing-1 $spacing-3;
    border-radius: $tag-radius-md;
}

p-tag.sm {
    .p-tag {
        font-size: $font-size-xs;
        padding: $spacing-0 $spacing-1;

        .p-tag-value {
            line-height: $spacing-3;
        }
    }
}

.p-tag .p-tag-icon {
    margin-right: $spacing-1;
    font-size: $font-size-xs;
}

p-tag {
    &.p-tag-success .p-tag {
        background-color: $color-alert-green-light;
        color: $color-accessible-text-green;
    }

    &.p-tag-info .p-tag {
        background-color: $color-accessible-text-blue-bg;
        color: $color-accessible-text-blue;
    }

    &.p-tag-warning .p-tag {
        background-color: $color-alert-yellow-light;
        color: $color-alert-yellow;
    }

    &.p-tag-error .p-tag {
        background-color: $color-alert-red-light;
        color: $color-alert-red;
    }
}
