SumOfUs/Champaign

// Member-facing survey styles
.survey {
  $font-size-breakpoint: 600px;
  width: 90%;
  @include legacy-pie-clearfix();
  min-height: calc(100vh - 300px);
  margin: 100px auto;
  &__intro {
    padding-top: 60px;
    @media (min-width: $font-size-breakpoint) {
      font-size: 18px;
    }
  }
  &__skip-button {
    float: left;
  }
  &__form {
    background: white;
    padding: 40px;
    box-shadow: 8px 1px 40px 0 rgba(0, 0, 0, 0.07);
    margin: 80px 0;
    @include legacy-pie-clearfix();
    z-index: 0 !important;
    @media (min-width: $font-size-breakpoint) {
      font-size: 18px;
    }
    @media (max-width: 700px) {
      margin: 40px 0;
      padding: 15px;
    }
  }
  &__skip-button {
    background-color: $light-orange;
  }
  &__button.button {
    margin-top: 15px;
    @media (min-width: 400px) {
      width: 142px;
      margin-right: 2%;
    }
  }
  &__instruction,
  &__question {
    font-size: 20px;
    @media (min-width: $font-size-breakpoint) {
      font-size: 24px;
    }
    font-weight: lighter;
    line-height: 1.4em;
  }
  .form--big input,
  .form--big select,
  .form--big textarea,
  .form--big .selectize-control.single .selectize-input,
  .form--big .hosted-fields__host {
    -webkit-appearance: none;
    border-radius: 0;
    background: #f9f9f9;
    &.has-error {
      border-color: $orange;
    }
    &:focus,
    &.focus {
      border-color: $teal;
    }
  }
  .form--big label.checkbox-label {
    font-size: inherit;
    position: relative;
    input[type='checkbox'] {
      top: 1px;
    }
  }
  .form--big .has-error .selectize-control.single .selectize-input {
    border-color: $orange;
    -webkit-appearance: none;
    border-radius: 0;
  }
  .form__group {
    margin-bottom: 32px;
  }
  label {
    margin-bottom: 5px;
    display: block;
  }
  .radio-container {
    margin-top: 0;
    label {
      margin: 22px 0 5px 10px;
      display: block;
    }
  }

  &.post-call {
    // make room for fixed footer
    padding-bottom: 150px;

    .post-call__intro {
      margin-bottom: 1em;
    }

    .post-call__talking-points {
      padding-top: 1em;
    }

    .survey__form {
      margin-bottom: 95px;
      margin-top: 60px;
    }

    .hidden {
      display: none;
    }

    .post-call__toggle-button {
      font-weight: bold;
    }
  }
  .body-text.post-call__intro,
  .body-text.post-call__talking-points {
    min-height: unset;
    margin-bottom: unset;
  }
}