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

@{se-prefix} {
  &__title {
    display: block;
    float: none;
    clear: both;
    color: @heading-color;
    font-weight: 700;
    font-size: 14px;
    line-height: @line-height-base;
  }

  &__item {
    &:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
    }

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

  &__label {
    display: table-cell;
    flex: 0 0 auto;
    width: initial;
    color: @se-label-color;
    white-space: nowrap;
    text-align: right;

    &-optional {
      margin-left: @se-optional-margin;
      color: @se-label-optional-color;

      &-no-text {
        margin-left: 0;
      }

      >.anticon {
        margin-left: @se-optional-margin;
      }
    }
  }

  &__control {
    flex: 1 0 0;
    width: 100%;
  }

  &__compact {
    @{se-prefix}__title,
    @{se-prefix}__item {
      margin-bottom: @se-compact-bottom;
    }

    .@{ant-prefix}-form-item-extra {
      display: none;
    }
  }

  &__line {
    border-bottom: 1px dashed #e8e8e8;
  }

  &__hide-label,
  &__inline,
  &__vertical {
    @{se-prefix}__nolabel {
      display: none !important;
    }
  }

  &__horizontal {
    @{se-prefix}__item {
      display: flex;

      &:last-child {
        margin-bottom: 0;
      }

      @{se-prefix}__label {
        display: flex;
        justify-content: flex-end;

        &-text {
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .@{ant-prefix}-form-item {
        &-required::before {
          line-height: inherit;
        }

        &-label>label::after {
          margin-left: 4px;
        }
      }
    }
  }

  &__vertical {
    @{se-prefix}__item {
      display: block;
      width: 100%;
    }
  }

  &__inline {
    .@{ant-prefix}-form-item-label,
    @{se-prefix}__control {
      flex: none;
      width: initial !important;
      text-align: left;
    }

    @{se-prefix}__item {
      &:last-child {
        margin-right: 0;
      }
    }
  }
}

@media (max-width: @mobile-max) {
  @{se-prefix} {
    &__horizontal {
      @{se-prefix}__item {
        display: block;

        .@{ant-prefix}-form-item-label {
          width: 100% !important;
          text-align: left;
        }

        @{se-prefix}__label {
          justify-content: normal;
        }
      }
    }

    &__horizontal,
    &__vertical {
      @{se-prefix}__label,
      @{se-prefix}__control {
        width: 100% !important;
      }
    }
  }
}