@import '../../../../lib/style/themes/default';
@import '../../../../lib/style/mixins/index';
@import '../../text-field/style/mixin';
@import 'mixin';

@output-prefix-cls: ~'@{c7n-pro-prefix}-output';
@field-label-prefix-cls: ~'@{c7n-pro-prefix}-field-label';

.@{output-prefix-cls} {
  font-weight: @output-font-weight;
  line-height: @output-line-height;
  white-space: @output-white-space;
  word-break: @output-word-break;

  &-invalid {
    padding: @input-padding-vertical-base @input-padding-horizontal;
    color: @error-color;
    background-color: @error-bg-color;
    border: @border-width-base @border-style-base @error-color;
    border-radius: @border-radius-base;
  }

  &-multiple-block {
    .tag-block;
    vertical-align: text-top;
  }

  &:empty::before {
    display: inline-block;
    width: 0;
    content: '';
  }

  &-highlight {
    border-color: @input-highlight-border-color;
  }

  .multi;

  &-float-label {
    line-height: @float-label-height-base;
  }

  &-float-label + .@{field-label-prefix-cls}-wrapper {
    position: relative;

    .@{field-label-prefix-cls} {
      position: absolute;
      top: -(@float-label-height-base + @output-float-label-line-height / 2);
      width: 100%;
      padding: 0;
      overflow: hidden;
      color: inherit;
      font-weight: @output-font-weight;
      font-size: @output-float-label-font-size;
      line-height: @output-float-label-line-height;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}