.survey {
  &__page-title {
    @include main-title;
    margin-bottom: $large-spacing*2;
    span {
      @include main-title;
    }
  }

  &__panel-title,
  &__panel-description,
  &__page-description {
    line-height: 1.5;
    margin-bottom: $large-spacing;
    font-size: 1rem;

    > span > span { // weird survey.js html structure
      @include heading-4;
    }
  }

  &__question-title {
    @include heading-4;
    margin-bottom: $medium-spacing;
    > span > span { // weird survey.js html structure
      @include heading-4;
    }
  }

  &__input {
    width: 100%;
    margin-bottom: $medium-spacing;
  }

  &__body {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    //grid-template-areas: "content content" "navigation progress";

    &--completed {
      flex-direction: column;
    }
  }

  &__page {
    width: 100%;
    //grid-area: content;
    order: 1;
  }

  &__footer {
    //grid-area: navigation;
    order: 2;
  }

  $progress-margin-right: 120px;
  &__progress {
    background-color: $color-silver;
    height: 0.3em;
    order: 3;
    width: 40%;
    //grid-area: progress;
    position: relative;
    margin-right: $progress-margin-right;
    box-sizing: border-box;
    display: flex;
    align-content: center;
  }

  &__radiogroup-group, &__checkbox-group {
    display: flex;
    flex-direction: column;
  }

  &__progress-bar {
    background-color: $color-brand;

    height: 100%;

    > span {
      position: absolute;
      right: -$progress-margin-right;
      top: -0.25em;
      @include regular-text;
    }

  }

  &__error {
    margin-bottom: $large-spacing;
  }

  &__error-item {
    span {
      color: $color-error;
      @include small-text;
    }
  }

  &__completed-text {
    @include regular-text;
  }
}

.question {

  $question: &;
  &--error #{$question}__input {
    border-color: $color-error;
    box-shadow: none;
  }
}