@use 'mixins/config' as *;
@use 'mixins/mixins' as *;
@use 'mixins/function' as *;

@include b(form) {
  &.no-has-label {
    & + .#{$el-namespace + -form-item__label} {
      width: 0;
      padding: 0;
    }
  }

  @include e(footer) {
    display: flex;
    justify-content: flex-end;
  }
  @include e(group__item) {
    margin-bottom: 20px;
    @include e(group__item__icon) {
      display: flex;
      align-items: center;

      @include elb(icon) {
        margin-right: 5px;
      }
    }
  }

  .#{$plus-namespace + -form-item-extra} {
    color: getCssVar('text-color-placeholder');
    font-size: getCssVar('font-size-base');
    margin-bottom: 24px;
  }
}

// ========== 新版原生布局样式（Flex 和 Grid）==========
// 注意：这些样式必须在 @include b(form) 外部定义，避免 mixin 嵌套问题
.#{$plus-namespace + -form__row} {
  width: 100%;

  // Flex 布局模式
  &--flex {
    display: flex;
    flex-wrap: wrap;
    column-gap: 24px;
    row-gap: 16px;
    align-items: flex-end;
  }

  // Grid 布局模式
  &--grid {
    display: grid;
    gap: 16px 24px;
    width: 100%;
    // Grid 布局默认2列，每列自适应
    grid-template-columns: repeat(2, 1fr);
  }
}

.#{$plus-namespace + -form__item-wrapper} {
  width: 100%;

  // Flex 布局包裹器
  &--flex {
    flex: 0 0 auto;
  }

  // Grid 布局包裹器
  &--grid {
    width: 100%;
  }
}