@import './btn.wxss';
@import './form.checkbox.wxss';
@import './form.radio.wxss';
@import './form.switch.wxss';
@import './form.field.wxss';

/* ========== 基础表单布局 ========== */
.wv-form {
  display: grid;
  grid-template-columns: auto 1fr; 
  align-items: center;
  width: 100%;
  margin-bottom: var(--wv-margin-default);
}

/* 表单布局间距变体 */
.wv-form.gap-huge { gap: var(--wv-padding-default); }
.wv-form.gap-large { gap: var(--wv-padding-small); }
.wv-form, .wv-form.gap-default { gap: var(--wv-padding-mini); }
.wv-form.gap-small { gap: var(--wv-margin-mini); }
.wv-form.gap-mini { gap: calc(var(--wv-margin-mini) * 0.75); }

/* 单行表单 - 所有元素在一行显示 */
.wv-form.inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wv-padding-small);
}

.wv-form.inline .wv-control-label {
  margin-right: var(--wv-margin-mini);
  text-align: left;
}

.wv-form.inline .wv-control-area {
  margin-right: var(--wv-padding-small);
  flex: 0 1 auto;
}

/* ========== 控件标签 ========== */
.wv-form .wv-control-label {
  display: block;
  text-align: right;
  white-space: nowrap;
  padding: 0 var(--wv-padding-mini) 0 0;
}

/* 全宽标签 */
.wv-form .wv-control-label.full {
  grid-column: span 2;
  text-align: unset;
  padding: var(--wv-padding-small) 0 var(--wv-padding-mini) 0;
  font-weight: 500;
}

/* 标签对齐变体 */
.wv-form.label-left .wv-control-label { text-align: left; }
.wv-form.label-right .wv-control-label { text-align: right; }
.wv-form.label-top .wv-control-label { 
  grid-column: span 2;
  text-align: left;
  padding: var(--wv-padding-mini) 0 var(--wv-padding-mini) 0;
}
.wv-form.label-top .wv-control-area {
  grid-column: span 2;
}

/* 必填字段标记 */
.wv-form .required .wv-control-label::after,
.wv-form .wv-control-label.required::after {
  content: '*';
  color: var(--wv-background-color-danger);
  margin-left: var(--wv-padding-mini);
}

/* ========== 控件区域 ========== */
.wv-form .wv-control-area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wv-padding-mini);
  min-width: 0; /* 添加最小宽度约束，允许子元素可以收缩 */
  width: 100%; /* 确保控件区域占满网格单元格宽度 */
}

/* 控件区域跨越整行 */
.wv-form .wv-control-label.full + .wv-control-area, 
.wv-form .wv-control-area.full,
.wv-form.label-top .wv-control-area {
  grid-column: span 2;
}

/* 控件在区域内的布局 */
.wv-form .wv-control-area .wv-form-control {
  flex: 1;
  min-width: 0; /* 防止flex项目的最小内容宽度导致溢出 */
  width: 100%; /* 确保表单控件默认占满整个空间 */
  box-sizing: border-box; /* 确保padding和border计入宽度 */
}

.wv-form .block {
  flex-basis: 100%;
  width: 100%;
}

/* 区域内子元素的垂直对齐 */
.wv-form .wv-control-area.align-top { align-items: flex-start; }
.wv-form .wv-control-area.align-bottom { align-items: flex-end; }
.wv-form .wv-control-area.align-stretch { align-items: stretch; }

/* ========== 表单分组 ========== */
.wv-form-group {
  margin-bottom: var(--wv-margin-default);
  padding: 0;
  border: 0;
  width: 100%;
}

.wv-form-group-title {
  font-size: var(--wv-font-size-default);
  font-weight: 500;
  margin-bottom: var(--wv-padding-small);
  padding-bottom: var(--wv-padding-mini);
  border-bottom: 1rpx solid var(--wv-border-color);
}

.wv-form-group.bordered {
  border: 1rpx solid var(--wv-border-color);
  border-radius: var(--wv-border-radius-default);
  padding: var(--wv-padding-default);
}

/* ========== 表单验证状态 ========== */
.wv-form .wv-control-area.success {
  --wv-field-border-color: var(--wv-background-color-success);
}

.wv-form .wv-control-area.error {
  --wv-field-border-color: var(--wv-background-color-danger);
}

.wv-form .wv-control-area.warning {
  --wv-field-border-color: var(--wv-background-color-warning);
}

.wv-form .wv-form-message {
  width: 100%;
  font-size: var(--wv-font-size-small);
  margin-top: var(--wv-padding-mini);
}


/* ========== 标签控件 ========== */
label {
  display: flex;
  align-items: center;
  gap: var(--wv-margin-mini);
}

/* 标签垂直对齐变体 */
label.align-top { align-items: flex-start; }
label.align-bottom { align-items: flex-end; }

/* 标签布局变体 */
label.block {
  display: block;
  width: 100%;
}

label.inline {
  display: inline-flex;
  margin-right: var(--wv-padding-small);
}