comparing-risks/src/scss/modules/_forms.scss

// forms - very custom form styling (hide honeypots etc.)
// ======================================================================
.checkbox {
  &-input {
    @extend %visuallyhidden;
  }

  &-label {
    @include spacing-inner(l 1.3);
    position: relative;
    cursor: pointer;

    .question__ofwhat & {
      @include font-size(small);
    }

    &::before {
      @include absolute(t .1, l 0);
      @include border-color(default);
      border-style: solid;
      border-width: 1px;
      display: block;
      content: '';
      width: 20px;
      height: 20px;
    }
  }
}

.response-option {
  @include spacing(b .1);

  &__label {
    @extend %button--wide;
    @include color(default);

    &__text {
      @include spacing(r $width-icon);
      display: inline-block;
    }

    &--initial {
      .response-option__label__text {
        @include spacing(l $width-icon);
      }
    }

    &--correct {
      @include color(correct);
    }

    &--incorrect {
      @include color(error);
    }
  }
}

.form-item {
  @include spacing(b 3);
  text-align: center;

  &--mt {
    @include spacing(t 3);
  }

  &__label {
    @include spacing(b .75);
  }

  &__input {
    @include center;
    position: relative;
    max-width: 300px;

    &--currency {
      @include absolute(r .4, t .3);
      @include color(axis);
      @include font-size(small);
    }
  }

  &__select {
    @include spacing(h .5);
    width: 120px;

    &-wrapper {
      position: relative;
    }
  }
}