@import "woople-theme/variables.css.less";
@import "woople-theme/colours.css.less";

@assessment-fieldset-padding: 32px;
@touch-assessment-fieldset-padding: @assessment-fieldset-padding / 2;
@question-number-offset: 18px;
@answer-label-font-size: 14px;

#assessment {
  margin: 0;

  .fieldset {
    padding: @assessment-fieldset-padding;
  }

  .even {
    background-color: white;
  }

  legend {
    margin: 0 0 8px 0;
    border: none;
    padding-left: @question-number-offset;
    font-size: 18px;
    font-weight: @title-font-weight;
    line-height: normal;
    color: @primaryTextColour;

    span {
      margin-left: -@question-number-offset;
      color: @primary;
    }
  }

  label {
    margin: 0;
    padding-top: 8px;
    font-size: @answer-label-font-size;
    line-height: normal;
    color: @secondaryTextColour;

    input {
      margin-top: 2px;
      margin-bottom: 0;
      width: @answer-label-font-size;
      height: @answer-label-font-size;
    }
  }

  .span4 {
    padding-top: 12px;
  }

  .fade-out {
    opacity: 0;
    -webkit-transition: opacity 0.5s;
       -moz-transition: opacity 0.5s;
         -o-transition: opacity 0.5s;
            transition: opacity 0.5s;
  }

  .span8 {
    text-align: right;
  }

  input[type=button] {
    margin-right: @assessment-fieldset-padding / 2;
  }

  p {
    margin-bottom: 0;
    padding: @assessment-fieldset-padding / 2;
    text-align: center;
    font-size: @sosumi-font-size;
    color: @secondaryTextColour;
  }
}

@media (max-width: 480px) {
  #assessment {
    .fieldset {
      padding: @touch-assessment-fieldset-padding 0 (@touch-assessment-fieldset-padding - @touch-assessment-fieldset-padding / 8) 0;
    }

    legend {
      margin-bottom: @touch-assessment-fieldset-padding / 2 - @touch-assessment-fieldset-padding / 8;
      margin-left: @touch-assessment-fieldset-padding;
      margin-right: @touch-assessment-fieldset-padding;
      width: auto;
    }

    label {
      padding: (@touch-assessment-fieldset-padding / 8) @touch-assessment-fieldset-padding (@touch-assessment-fieldset-padding / 8) (@touch-assessment-fieldset-padding + @question-number-offset);
    }

    .row-fluid {
      -webkit-perspective: 1000; /* Removes CSS transition flicker */
    }

    .span4 {
      padding-top: 0;
      min-height: 0;
      height: @touch-assessment-fieldset-padding + 16; /* 16px is the height of the badge that this span contains */
      text-align: center;
    }

    .collapse-height {
      height: 0;
      -webkit-transition: height 0.5s;
         -moz-transition: height 0.5s;
           -o-transition: height 0.5s;
              transition: height 0.5s;
    }

    .span8 {
      text-align: center;
    }

    input[type=button] {
      margin-right: @assessment-fieldset-padding / 4;
    }
  }
}