@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} {
  color: @output-color;
  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;
    margin: @output-tag-margin;
    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 > .@{field-label-prefix-cls} {
    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;
  }
}