.xt-form-placeholder {
  $bgc: #f6f6f6;
  margin: 1em;
  padding: 1em;
  color: #666;
  background-color: #fff;
  position: relative;
  min-height: 100px;

  @mixin xt-form-placeholder-checkradio {
    flex: 0 1 auto;
    width: 1.12em;
    height: 1.12em;
    box-shadow: 9em 0 0 $bgc;
  }

  &:after {
    content: '您还没有配置表单，请编辑...';
    white-space: nowrap;
    position: absolute;
    transform: translate(-50%, -100%);
    top: 50%;
    left: 50%;
    font-size: 18px;
    color: #666;
    background-color: rgba(200, 200, 200, 0.25);
    box-shadow: 0 0 2px 0 #fff;
    padding: .75em 1.5em;
    border-radius: 6px;
  }

  .xt-form-placeholder-input,
  .xt-form-placeholder-textarea,
  .xt-form-placeholder-checkbox,
  .xt-form-placeholder-radio,
  .xt-form-placeholder-button {
    margin: .5em 0;
    display: flex;

    &:before, &:after {
      content: '';
      background-color: $bgc;
    }

    &:before {
      width: 5em;
      height: 1.5em;
      margin-right: .5em;
    }

    &:after {
      flex: 1;
    }

  }

  .xt-form-placeholder-input {}

  .xt-form-placeholder-textarea {
    &:after {
      height: 4em;
    }
  }

  .xt-form-placeholder-checkbox, .xt-form-placeholder-radio {
    align-items: center;
    &:before {
      box-shadow: 7em 0 0 $bgc, 16em 0 0 $bgc;
    }
    &:after {
      @include xt-form-placeholder-checkradio;
    }
  }

  .xt-form-placeholder-radio {
    &:after {
      border-radius: 50%;
    }
  }

  .xt-form-placeholder-button {
    margin-top: 1em;
    display: block;
    text-align: center;

    &:before, &:after {
      display: inline-block;
      // flex: 0 1 auto;
      width: 6em;
      margin: 0 1em;
      height: 2em;
    }
  }
}
