@import "../common/varible";

.yu-field {
  font-family: $font-family;
  color: $text;
  font-size: 0;
  margin: 0 $space-small $space 0;
  vertical-align: top;
  display: block;
  &.flex {
    display: flex;
  }
  &.inline {
    display: inline-block;
    & > .field {
      width: auto;
      & > .yu-input {
        width: auto;
        & > textarea {
          width: auto;
        }
      }
    }
  }
  & > label {
    font-size: $normal;
    width: $field-label-width;
    height: $height;
    line-height: $height;
    box-sizing: border-box;
    padding-right: $space;
    &.top {
      flex-wrap: nowrap;
      display: block;
      margin-bottom: $space;
    }
    &.left {
      display: inline-block;
      text-align: left;
    }
    &.right {
      display: inline-block;
      text-align: right;
    }
  }
  & > .field {
    vertical-align: top;
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    & > .yu-input {
      margin: 0;
      & > input {
        width: 100%;
      }
      & > textarea {
        width: 100%;
      }
    }
    & > .yu-switch {
      margin-top: $space;
    }
    &.cascader {
      min-width: 500px;
    }
  }
  .three.field {
    min-width: 370px;
  }
  &.error {
    & > .field {
      text-align: left;
      & > .yu-input {
        & > input {
          border: 1px solid $danger;
        }
        & > textarea {
          border: 1px solid $danger;
        }
      }
      & > .error {
        margin: 0;
        font-size: $normal;
        line-height: $height;
        color: $danger;
      }
    }
  }

}