@c8y/style/styles/_tag.less

Styles for Cumulocity IoT applications

.tag {
  display: inline;
  padding: 0.2em 0.6em 0.2em;
  border-radius: 0.25em;
  color: @tag--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;
  flex-shrink: 0;
  align-self: flex-start;
  .form-control &{
    align-self: center;
  }
  a & {
    &:hover,
    &:focus {
      color: @tag--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;
    flex: 0 1 fit-content;
    .btn-clean{
      padding: 0!important;
    }
    + .chip{
      margin-left: 4px;
    }
  }
}

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

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

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

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

.tag--info {
  color: @tag--color-info;
  .tag--variant(@tag--background-info);
  &.chip{
    color: @status-info-dark;
  }
}

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

.tag--danger {
  color: @tag--color-danger;
  .tag--variant(@tag--background-danger);
}// Font size inherit
.text--inherit {
  font-size: inherit;
}