_patterns_status-label.scss

@import 'settings';

/**
  TODO this component has been deprecated. It will be removed in the next major version / not supported in Pragma.
  The status label has been merged into the Chip component.
  See https://github.com/canonical/vanilla-framework/issues/5535
 */

/**
  TODO this component uses hard-coded colors that don't respond to theming, which is not ideal.
    However, it looks fine on all themes, and re-working it to support theming is a larger undertaking.
    So, it is being left as-is until it can be revisited as part of the tokens effort in the future.
 */
// Default status label styling
@mixin vf-p-status-label {
  %vf-status-label {
    @extend %x-small-text;
    @extend %u-no-margin--bottom--small;

    display: inline-block;
    font-weight: $font-weight-bold;
    padding: map-get($settings-text-x-small, nudge) $sph--small;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
  }

  .p-status-label,
  .p-label {
    @extend %vf-status-label;

    background-color: $color-mid-dark;
    color: $color-x-light;
  }

  .p-status-label--positive,
  .p-label--positive {
    @extend %vf-status-label;

    background-color: $color-positive;
    color: $color-x-light;
  }

  .p-status-label--caution,
  .p-label--caution {
    @extend %vf-status-label;

    background-color: $color-caution;
    color: $colors--light-theme--text-default;
  }

  .p-status-label--information,
  .p-label--information {
    @extend %vf-status-label;

    background-color: $color-information;
    color: $color-x-light;
  }

  .p-status-label--negative,
  .p-label--negative {
    @extend %vf-status-label;

    background-color: $color-negative;
    color: $color-x-light;
  }
}

// Deprecated mixin kept for compatibility
@mixin vf-p-label {
  @include vf-p-status-label;
}