@import "../styles/common";

.w-form{

  --form-margin:10px;
  --form-input-height:36px;

  overflow: hidden;

  .w-form-content{
    flex-wrap: wrap;
    .flex_parent();
    margin: calc(-1 * var(--form-margin));
    align-items: flex-start;
  }


  .w-form-line{
    border: 1px solid transparent;
    background: #f3f3f3;
    //background: red;
    border-radius: 20px;
    line-height: var(--form-input-height);
    .flex_parent();
    flex: 0 0 auto;
    width: 100%;
    margin: var(--form-margin);
    position: relative;


    &.disabled:not(.w-form-line-hide-bg):not(.w-form-line-value-line){
      background: @disabled_bg_color;
    }


    &:not(.w-form-line-hide-bg):not(.w-form-line-value-line){
      .w-input,
      .ant-input,
      .w-number-input,
      .ant-input-number-handler-wrap,
      .w-select{
        height: var(--form-input-height);
        background: transparent;
      }

      .w-switch,
      .w-radio,
      .w-checkbox{
        margin-left: 11px;
      }

      &.w-form-line-error{
        border-color:red;
      }
    }

  }

  .w-form-label{
    width: auto;
    padding-left: 18px;

    &:after{
      content:'';
      display: inline-block;
      vertical-align: -5px;
      margin-left: 11px;
      width: 1px;
      height: 20px;
      background: #d8d8d8;
    }
  }

  .w-form-value{
    .flex_child();
  }


  .w-form-line-hide-bg,
  .w-form-line-value-line{
    background: transparent;
    .w-form-label{

      &:after{
        content: none;
      }
    }
  }

  .w-form-line-hide-label{
    .w-form-label{
      display: none;
    }
  }

  .w-form-line-auto-height{
    align-items: flex-start;
  }

  .w-form-line-value-line{
    display: block;

    .w-form-label{
      padding-left: 0;
    }

    .w-form-value{
      width: 100%;
    }
  }



}

.w-form-line-error-text{
  position: absolute;
  left: 0;
  top: 100%;
  color:red;
  line-height: 1;
  margin-top: 5px;
}

.w-form-required-sign{
  color:red;
}