skillbox/client/src/styles/_survey.scss

.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 {
    margin-bottom: $medium-spacing;
  }

  &__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: 30%;
    position: relative;
    box-sizing: border-box;
    display: flex;
    margin-left: auto;

    > span {
      position: absolute;
      width: 100%;
      text-align: right;
      bottom: -2em;
      @include regular-text;
    }
  }

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

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

    height: 100%;

    > span {
      position: absolute;
      width: 100%;
      text-align: right;
      bottom: -2em;
      @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%;
  }
}

@mixin table-row {
  display: flex;
  width: 100%;
  flex-direction: row;
  > td {
    @include small-text;
  }
}

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

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

    > td {
      display: flex;
      align-items: center;
    }
  }

  &__cell {
    display: flex;
    padding: $medium-spacing 0;
    text-align: left;
    vertical-align: middle;
    justify-content: center;
    flex: 1;

    @include small-text;

    span {
      line-height: 1.5;
    }
  }

  $half-spacing: calc($small-spacing / 2);

  thead {
    tr {
      @include table-row;
    }

    th {
      @include small-text;
      vertical-align: bottom;
      padding: $small-spacing 0;

      > span {
      }
    }
  }

  &__radio {
    margin: 0;
  }

  &__label {
    display: flex;
  }
}

.question {
  $question: &;

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

.sv-action {
  // manually setting this for the knockout version
  display: inline-flex;
}