@import "../common/PredefinedMixins.scss";
@import "./partial.scss";
@import "./Variables.scss";

.label {
  @include partial-label;
  @include flexDisplay();
  @include flexWrap(nowrap);
  @include flexDirection(column);
  @include flexJustifyContent(center, center);
  @include flexAlignItems(flex-start, start);
  @include flexAlignContent(stretch, stretch);

  &.multiline {
    padding-bottom: 0;
  }

  &:not(.multiline) {
    span {
      @include partial-ellipsis;
    }
  }

  span {
    @include flexDisplay();
    @include flexDirection(column);
    @include flexJustifyContent(center, center);
    flex-grow: 1;
    width: 100%;
    height: 100%;
    min-width: 0;
  }

  .tooltip-icon {
    position: absolute;
    right: 0;
    top: calc(50% - 9px);
    padding: 4px;
    cursor: pointer;

    svg {
      width: 10px;
      height: 10px;

      path {
        fill: $tooltip_icon;
      }
    }
  }

  &.v-label {
    position: relative;
    z-index: 3;
    padding: 0 5px;
    border-radius: 12px;
    max-width: calc(100% - 16px);
    background-color: $input_text_editor_bg;
    font-size: $font_size_vertical_label;
    line-height: $font_size_vertical_label_height;

    &.has-tooltip-icon {
      padding-right: 19px;
      .tooltip-icon {
        right: 0;
        top: calc(50% - 11px);
      }
    }
  }

  // Special Class
  &.bold {
    font-weight: 600;
  }

  &.center {
    @include flexJustifyContent(center, center);
  }

  &.center + .icon {
    top: unset;
    bottom: 0;
    height: 26px;
  }

  &.right-label {
    @include flexJustifyContent(flex-end, end);
    position: relative !important;
    width: unset !important;

    &.multiline {
      text-align: right;
    }
  }

  &:not(.v-label) {
    &.multiline {
      text-overflow: unset;
      white-space: normal;
      line-height: 15px;
    }
  }

  &.warninglabel {
    color: $field_warning_label_fg !important;
  }

  &.radio.v-label,
  &.checkbox.v-label {
    @include partial-ellipsis;
    display: block;
    font-size: 12px;
    font-weight: 300;
    max-width: calc(100% - 32px);
    padding: 0;
    border-radius: 0;
  }

  &.radio.v-label,
  &.checkbox.v-label,
  &.richedit.v-label,
  &.memotext.v-label {
    background-color: transparent;

    &.disabled {
      background-color: transparent;
    }
  }

  &:focus-visible {
    @include focus();
  }
}

// ColorPicker
.cp-label {
  position: relative !important;
  width: 75px;
  color: $cp_box_fg;
}

.clickable:not(.disabled) {
  cursor: pointer;
}