@import "../../style/themes/default";
@form-component-max-height: @input-height-lg;
@form-component-height: @input-height-base;
@form-help-margin-top: (@form-component-height - @form-component-max-height) / 2 + 2px;

@label-con: ~"ta-label-con";
.@{label-con} {
  margin-bottom: @form-item-margin-bottom;
  &-with-extra {
    margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base - @form-help-margin-top;
  }

  &-label {
    text-align: right;
    vertical-align: middle;
    line-height: @form-component-max-height - 0.0001px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    color: @label-color;

    &:after {
      content: ":";
      margin: 0 8px 0 2px;
      position: relative;
      top: -0.5px;
    }
  }

  &-no-colon:after {
    content: " ";
  }

  &-form {
    line-height: @form-component-max-height - 0.0001px;
    position: relative;
  }

  &-extra {
    color: @text-color-secondary;
    line-height: @line-height-base;
    height: @font-size-base * @line-height-base;
    transition: color .3s @ease-out;
    margin-top: @form-help-margin-top;
    clear: both;
  }

  .make-vertical-layout-label() {
    padding: @form-vertical-label-padding;
    margin: @form-vertical-label-margin;
    display: block;
    text-align: left;
    line-height: @line-height-base;

    label:after {
      display: none;
    }
  }

  &-top {
    padding-bottom: 8px;
    .@{label-con}-label {
      .make-vertical-layout-label();
    }
    .@{label-con}-form {
      line-height: @line-height-base;
    }
    .@{label-con}-extra {
      margin-top: 2px;
      margin-bottom: -4px;
    }
  }
}