@c8y/style/styles/_labels.less

Styles for Cumulocity IoT applications

/* 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 {
      // color: @label-link-hover-color;
      text-decoration: none;
      cursor: pointer;
    }
  }
  &:empty {
    display: none;
  }
  .btn & {
    position: relative;
    top: -1px;
  }
  &.chip{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 20px;
    .btn-clean{
      padding: 0!important;
    }
    + .chip{
      margin-left: 4px;
    }
  }
}

// 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: @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);
}