@import './base.less';

.@{css-prefix}.form {
  //padding: @padding-horizontal;
  //margin: 0em -1px;
  width: 100%;

  &.inline {
    .field {
      display: inline-block;
      margin-right: .8em;
      margin-bottom: 0;
      vertical-align: middle;
    }
  }

  .fields {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    .flex-direction(row);
    margin: 0 -.5em 1em;
    flex-wrap: wrap;

    > .field {
      -webkit-box-flex: 0;
      .flex(0 1 auto);
      padding-left: .5em;
      padding-right: .5em;
      margin: 0;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  .field {
    display: block;
    font-size: 1em;
    margin: 0 0 .6em;

    .disabled;    

    &.required {
      > .label:after {
        margin: 0 0 0 .3em;
        content: '*';
        color: @form-error-color;
        //display: inline-block;
      }
    }

    &.inline {
      //display: inline-block;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;

      > label {
        display: inline-block;
        margin: 0 1em 0 0;
      }

      &.required {
        > .label:before {
          margin: 0 0.3em 0 0;
          content: '*';
          color: @form-error-color;
        }
        > .label:after {
          margin: 0;
          content: '';
        }
      }

      &.error .tip {
        margin-left: 0.6em;
      }
    }

    .@{css-prefix}.input, .select {
      width: 100%!important;
    }

    > label {
      display: block;
      margin: 0.3em 0em 0.3rem 0em;
      font-weight: 500;
      text-align: left;
      text-transform: none;
    }

    .radios, .checkboxes {
      padding: @input-padding-vertical 0;
    }

    .switch {
      margin-top: @input-padding-vertical;
    }

    &.error {
      .tip {
        color: @form-error-color;
        font-size: .9em;
      }
      input, .select {
        border-color: @form-error-color;
      }
    }

  }
}

@media only screen and (max-width: @largestMobileScreen) {
  .@{css-prefix}.form {
    .fields {
      .flex-direction(column);
    }
  }
}