@import '../../../theme/styles/default.less';

@se-prefix: ~'.se';
@se-label-color: rgba(0, 0, 0, 0.85);
@se-compact-bottom: @layout-gutter;

@{se-prefix} {
  &__title {
    display: block;
    font-size: 14px;
    color: @heading-color;
    font-weight: 500;
    line-height: @form-component-max-height - 0.0001px;
  }
  &__item {
    &:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
    }
    &-empty {
      &:before {
        content: '';
        display: inline-block;
      }
    }
    // fix angular & ng-zorro-antd
    .@{ant-prefix}-form-explain {
      display: block;
    }
  }
  &__label {
    text-align: right;
    color: @se-label-color;
    white-space: nowrap;
    display: table-cell;
    flex: 0 0 auto;
    width: initial;
    &-optional {
      color: rgba(0, 0, 0, 0.45);
    }
  }
  &__control {
    flex: 1 0 0;
    width: 100%;
  }
  &__compact {
    @{se-prefix}__title,
    @{se-prefix}__item {
      margin-bottom: @se-compact-bottom;
    }
    .@{ant-prefix}-form-extra {
      display: none;
    }
  }
  &__line {
    border-bottom: 1px dashed #e8e8e8;
    @{se-prefix}__label,
    @{se-prefix}__control {
      padding-bottom: @se-compact-bottom;
    }
  }
  &__hide-label,
  &__inline,
  &__vertical {
    @{se-prefix}__nolabel {
      display: none !important;
    }
  }
  &__horizontal {
    @{se-prefix}__item {
      display: flex;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  &__vertical {
    @{se-prefix}__item {
      display: block;
    }
  }
  &__inline {
    @{se-prefix}__label,
    @{se-prefix}__control {
      text-align: left;
      width: initial;
      flex: none;
    }
    @{se-prefix}__item {
      &:last-child {
        margin-right: 0;
      }
    }
  }
}

@media (max-width: @mobile-max) {
  @{se-prefix} {
    &__horizontal {
      @{se-prefix}__item {
        display: block;
      }
    }
    &__horizontal,
    &__vertical {
      @{se-prefix}__label,
      @{se-prefix}__control {
        width: 100% !important;
      }
    }
  }
}