@import "mixins/mixins";
@import "common/var";

@include b(form-grid) {
  display: inline-block;
  margin-right:$--form-grid-margin-right + 1;
  vertical-align: top;
  font-size:$--form-grid-font-size;
  @include when(block) {
    display: block;
  }
  & .el-select{
    width:100%;
  }
  & .el-date-editor {
    width:100%;
  }
  & .el-form-item__label{
    float: none;
    display: inline-block;
  }
  & .el-form-item__content{
    display: inline-block;
    vertical-align: top;
  }

  & .el-button + .el-button,
  & .el-radio+.el-radio,
  & .el-checkbox+.el-checkbox{
    margin-left:$--form-grid-margin-right;
  }
  & .el-row{
    margin-right: $--form-grid-row-padding-minus;
    margin-left: $--form-grid-row-padding-minus;
  }
  & .el-col {
    padding-right:$--form-grid-col-padding;
    padding-left:$--form-grid-col-padding;
  }
  & .el-cascader {
    display: block;
  }
  & .el-checkbox,
  & .el-radio,
  & .el-checkbox-group .el-checkbox,
  & .el-radio-group .el-radio{
    margin-right:$--form-grid-group-margin;
  }
  & .el-checkbox-group .el-checkbox + .el-checkbox,
  & .el-radio-group .el-radio + .el-radio {
    margin-left:0;
  }
  @include m(xxs) {
    width:60px;
  }
  @include m(xs) {
    width:80px;
  }
  @include m(sm) {
    width:120px;
  }
  @include m(md) {
    width:150px;
  }
  @include m(xmd) {
    width:200px;
  }
  @include m(xxmd) {
    width:240px;
  }
  @include m(lg) {
    width:300px;
  }
  @include m(xlg) {
    width:440px;
  }
  @include m(xxlg) {
    width:520px;
  }
}

@include b(inline-block) {
  display: inline-block;
}
@include b(block) {
  display: block !important;
}


.el-form-item .el-form-grid>.el-form-item .el-form-item__label ~ .el-form-item__content {
  display: inline-block;
}
.el-form-item .el-form-grid > .el-form-item  .el-form-item__content {
  display: block;
}