@use 'share' as *;
@use 'variables' as *;
@use 'config' as *;

.fat-form {
  // TODO: 这里耦合了 element-ui
  .#{$el-ns}-form-item .#{$el-ns}-form-item {
    margin-right: 0;
  }

  .#{$el-ns}-form-item__error {
    // background-color: white;
  }

  &--row {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    box-sizing: border-box;
  }
}

// element-ui 样式修复
.vue2 .fat-form {
  // form-item 调整为 flex 布局
  &:not(.#{$el-ns}-form--label-top) {
    .#{$el-ns}-form-item {
      display: flex;
    }

    &.#{$el-ns}-form--inline .#{$el-ns}-form-item {
      display: inline-flex;
    }

    .#{$el-ns}-form-item__content {
      margin-left: 0 !important;
      flex: 1;
    }
  }

  // 强制居中
  .fat-form-item__content::before {
    content: 'x';
    display: inline-block;
    width: 0;
    vertical-align: middle;
    visibility: hidden;
  }
}

// 强制隐藏 label，主要是修复 element-ui/element-plus 不一致的问题
.fat-form-item--hide-label > .#{$el-ns}-form-item__label-wrap,
.fat-form-item--hide-label > .#{$el-ns}-form-item__label {
  display: none !important;
}

.fat-form-item__content {
  flex: 1;
  display: inline-flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
}

.fat-form-row,
.fat-form-group-container {
  width: 100%;
  flex: 1;
}

.fat-form-item--inline-message {
  flex-wrap: nowrap;

  .fat-form-group-container {
    width: auto;
  }
}

.fat-form-message,
.fat-form-item-placeholder {
  line-height: 25px;
  font-size: 12px;
  color: #a1a4ab;
  // 强制换行
  width: 100%;
}

.fat-form-message--inline {
  display: inline;
  width: auto;
  white-space: nowrap;
  margin-left: 10px;
  line-height: inherit;
  align-self: flex-start;
}

.fat-form-tooltip {
  $tooltip-color: getVar(tooltip-color, $fat-color-font-secondary);
  $tooltip-hover-color: getVar(tooltip-hover-color, $fat-color-font-regular);

  display: inline-block;
  width: 1.2em;
  vertical-align: sub;
  fill: $tooltip-color;
  margin-left: 0.2em;
  cursor: pointer;

  &:hover {
    fill: $tooltip-hover-color;
  }
}

.fat-form-section {
  margin-bottom: 16px;
}

.fat-form-table {
  &__body {
    width: 100%;
  }

  &__table {
  }

  // 处理表单验证消息提示被隐藏问题
  &.fat-form-table__editable {
    .fat-form-table__table {
      .#{$el-ns}-table__body {
        .#{$el-ns}-table__cell {
          padding-top: 15px;
          padding-bottom: 17px;
          vertical-align: top;

          .cell {
            overflow: visible !important;
          }
        }
      }
    }
  }

  &__footer {
    margin-top: $fat-spacing-xs;
  }
}