@c8y/style/styles/core/feedback/_labels.less

Styles for Cumulocity IoT applications

@import "../../mixins/_labels.less";

/**
 * Labels - Inline label/tag component (deprecated, to be replaced by Tag)
 *
 * Note: Uses CSS custom properties (--c8y-font-size-xs) and @size-* tokens.
 *
 * Intentionally hardcoded values:
 * - em-based padding/border-radius (0.2em, 0.6em, 0.25em): Relative sizing
 * - Line-height (1): Unitless for proper alignment
 * - Positioning offset (-1px): Fine-tuning
 * - Gap (6px): Off-grid spacing for chip variant
 */

/* Remove after Codex launch. will be replaced by Tag */

.label {
  display: inline;
  padding: 0.2em 0.6em 0.2em;
  border-radius: 0.25em;
  color: @label-color-dark;
  vertical-align: baseline;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: 500;
  font-size: var(--c8y-font-size-xs);
  line-height: 1;
  a & {
    &:hover,
    &:focus {
      text-decoration: none;
      cursor: pointer;
    }
  }
  &:empty {
    display: none;
  }
  .btn & {
    position: relative;
    top: -1px;
  }
  &.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: @size-20;
    .btn-clean {
      padding: 0 !important;
    }
    + .chip {
      margin-left: @size-4;
    }
  }
}

// Colors
// Contextual variations (linked labels get darker on :hover)
.label-default {
  color: @label-color-dark;

  .label-variant(@label-background-default);
}

.label-primary {
  color: @component-background-default;
  .label-variant(@label-background-primary);
}

.label-success {
  color: @label-color-success;
  .label-variant(@label-background-success);
}

.label-info {
  color: @label-color-info;
  .label-variant(@label-background-info);
  &.chip {
    color: var(--palette-status-info-dark, var(--c8y-palette-status-info-dark));
  }
}

.label-warning {
  color: @label-color-warning;
  .label-variant(@label-background-warning);
}

.label-danger {
  color: @label-color-danger;
  .label-variant(@label-background-danger);
}