.reaction-questions {
  position: relative;
  &__block {
    @include divider-combo-1;
    background-color: $springster-purple-light;
    padding: 20px 0;
  }
  &__form {
    margin: 0;
  }
  &__list {
    margin: 5px;
    display: flex;
    justify-content: center;
  }
  &__item {
    padding: 0;
    margin: 0 10px;
  }
  &__label {
    cursor: pointer;
    @include font($baton-regular);
    display: block;
    font-size: $font-x-large;
    padding: 5px;
  }

  &__message {
    text-align: center;
    padding: 0 10px 10px;
  }
  input[type="radio"],
  input[type="checkbox"] {
    display: block;
    position: absolute;
    visibility: hidden;
    & ~ label {
      padding: 5px;
      opacity: 1;
      &:before {
        background-image: url('/static/img/icons/chhaajaa/likes.png');
        background-position: 0 0;
        background-repeat: no-repeat;
        background-size: inherit;
        border: none;
        border-radius: inherit;
        content: " ";
        display: block;
        height: 30px;
        width: 35px;
        margin: 0 auto 5px;
        text-align: center;
        transition: all ease-in-out 0.2s;
      }
      &:hover:before,
      &:focus:before,
      &:active:before {
        //background-position: 0 -57px;
        opacity: 0.5;
      }
    }
    & + label,
    &:checked + label {
      background: none;
      opacity: 1;
    }
    // &:checked + label:before {
    //   background: $springster-purple url('/static/img/icons/check-box.png') 0 0/25px no-repeat;
    // }
  }
  .like ~ label:before,
  .yes ~ label:before {
    background-image: url('/static/img/icons/Yes.width-50.png') !important;
    height: 50px!important;
    width: 50px!important;
  }
  .dislike ~ label:before,
  .no ~ label:before {
    background-image: url('/static/img/icons/No.width-50.png')!important;
    height: 50px!important;
    width: 50px!important;
  }
  .maybe ~ label:before {
    background-image: url('/static/img/icons/Maybe.width-50.png')!important;
    height: 50px!important;
    width: 50px!important;
  }
  .active {
    opacity: 0.5 !important;
  }

  &-success {
    &__block {
      background-color: $mint-green;
      padding: 20px 0 15px;
      text-align: center;
      .heading__micro-alt {
        padding: 10px;
        margin: 0;
      }
    }
    &__image {
      margin: 10px;
      display: inline-block;
      &--default {
        background: url('/static/img/icons/go-girl.png') no-repeat 0 0/100%;
        padding: 5px;
        height: 200px;
        width: 230px;
        margin: 0 auto;
      }
    }
    &__thumbnail {
      vertical-align: middle;
      width: 100%;
      height: auto;
      max-width: 345px;
    }
  }
  .heading__subtitle {
    text-align: center;
    padding: 0 10px;
  }
}
