.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;
      line-height: $default-line-height;

    }
  }

  &__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: 140px;

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

    > span {
      display: none;
    }
  }

  &__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.37em;
      @include regular-text;
    }

  }

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

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

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

  &__matrix {
    width: 100%;
  }

}

.matrix {
  margin-bottom: $large-spacing;

  &__row {
    display: table-row;
    border-top: 1px solid $color-silver;
  }

  &__cell {
    display: table-cell;
    padding: $small-spacing/2 0;
    text-align: left;
    vertical-align: middle;
    @include small-text;
  }

  thead {
    th {
      text-align: right;
      @include small-text;
      vertical-align: bottom;
      padding: $small-spacing/2 $small-spacing;
    }
  }

  &__radio {
    margin: 0;
  }

  &__label {
    display: flex;
  }
}

.question {

  $question: &;

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