/**
 * Styles for the field state label.
 */

@import (reference) "rb/css/defs.less";
@import (reference) "rb/css/ui/colors.less";

#rb-ns-ui() {
  .field-state-label() {
    @_color-vars: #rb-ns-ui.colors();

    @border-radius: 4px;
    @border-width: 1px;
    @line-height: 1.4;
    @padding-vert: 0;
    @padding-horiz: 0.4em;

    @bg-color-deleted: @_color-vars[@red-90];
    @border-color-deleted: @_color-vars[@red-60];
    @border-deleted: var(--ink-u-border-thin)
                     solid
                     @border-color-deleted;
    @text-color-deleted: @_color-vars[@red-60];

    @bg-color-draft: @summary-label-draft-bg;
    @border-color-draft: @summary-label-draft-border-color;
    @border-draft: var(--ink-u-border-thin)
                   solid
                   var(--rb-p-flag-draft-border-color);
    @text-color-draft: @summary-label-text-color;
  }
}

/**
 * A label indicating the state of a field.
 *
 * Modifiers:
 *     -is-deleted:
 *         The label will have a deleted color theme.
 *
 *     -is-draft:
 *         The label will have a draft color theme.
 *
 *     -is-inline:
 *         The label will be displayed inline.
 *
 * Structure:
 *     <div class="rb-c-field-state-label [modifiers]">
 *      ...
 *     </div>
 */
 .rb-c-field-state-label {
  @_label-vars: #rb-ns-ui.field-state-label();

  border-radius: var(--ink-u-border-radius-s);
  line-height: @_label-vars[@line-height];
  padding: @_label-vars[@padding-vert] @_label-vars[@padding-horiz];
  width: fit-content;

  &.-is-deleted {
    background: @_label-vars[@bg-color-deleted];
    border: @_label-vars[@border-deleted];
    color: @_label-vars[@text-color-deleted];
  }

  &.-is-draft {
    background: var(--rb-p-flag-draft-bg);
    border: @_label-vars[@border-draft];
    color:  var(--rb-p-flag-draft-fg);
  }

  &.-is-inline {
    display: inline;
  }
}
