skillbox/client/src/styles/_survey.scss

@import 'helpers';

.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;
    text-align: left;

    @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;
    }
  }

  &__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;
}

.sv-table__cell {
  flex-grow: 1;
  flex-shrink: 1;

  justify-content: center;
  display: flex;
  text-align: left;

  &:first-child {
    justify-content: flex-start;
  }

  // hide the label for matrix entries, cause survey.js makes us enter one, even though we don't want it
  .base-input-container__label {
    display: none;
  }

  .base-input-container--survey {
    margin-bottom: 0;
  }
}

.sv-table__row {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.sv-container-modern {
  font-family: $sans-serif-font-family;
}

.sv-table__cell--header {
  font-family: $sans-serif-font-family;
}

.sv-action-bar {
  display: flex;
  column-gap: $small-spacing;
}

.sv-action--hidden {
  display: none;
}

.table {
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: $medium-spacing;

  tr {
    width: 100%;
  }

  tbody {
    flex-direction: column;
    row-gap: $medium-spacing;
  }
}