.gmcq {
  &__widget {
    display: flex;display:-ms-flexbox;
    flex-wrap: wrap;
    justify-content: center;
  }

  &__item {
    position: relative;
    width: 100% !important;
  }

  &__item-input {
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    z-index: -1;
    .transform(translate(-50%, -50%));
    &:focus{
      outline: 2px solid #000 !important;
    }
  }

  &__item-label {
    display: block;
    z-index: 1;
  }

  &__item-label:not(.is-disabled) {
    cursor: pointer;
  }

  &__item-icon {
    display: none;
  }

  // --------------------------------------------------
  // GMCQ item icons
  // --------------------------------------------------
  &__item-answer-icon.is-radio .icon {
    .icon-radio-unchecked;
  }

  &__item-answer-icon.is-checkbox .icon {
    .icon-checkbox-unchecked;
  }

  &__item-label.is-selected {
    .gmcq__item-answer-icon.is-radio .icon {
      .icon-radio-checked;
    }
  }

  &__item-label.is-selected {
    .gmcq__item-answer-icon.is-checkbox .icon {
      .icon-checkbox-checked;
    }
  }

  &__item-correct-icon .icon {
    .icon-tick;
  }

  &__item-incorrect-icon .icon {
    .icon-cross;
  }
  // --------------------------------------------------

  // --------------------------------------------------
  // Class to show the selection icons until the component is complete
  // --------------------------------------------------
  &__widget:not(.is-complete) {
    .gmcq__item-answer-icon {
      display: block;
    }
  }
  // --------------------------------------------------

  // --------------------------------------------------
  // Class to show the users selection
  // --------------------------------------------------
  &__widget.show-user-answer {
    .is-correct .is-selected .gmcq__item-correct-icon,
    .is-incorrect .is-selected .gmcq__item-incorrect-icon {
      display: block;
    }
  }

  &__widget.show-user-answer {
    .gmcq__item:not(.is-correct):not(.is-incorrect) .is-selected .gmcq__item-answer-icon {
      display: block;
    }
  }
  // --------------------------------------------------

  // --------------------------------------------------
  // Class to show the correct answers
  // --------------------------------------------------
  &__widget.show-correct-answer {
    .is-correct .is-selected .gmcq__item-correct-icon,
    .is-incorrect .is-selected .gmcq__item-correct-icon {
      display: block;
    }
  }

  &__widget.show-correct-answer {
    .gmcq__item:not(.is-correct):not(.is-incorrect) .is-selected .gmcq__item-answer-icon {
      display: block;
    }
  }
  // --------------------------------------------------
}


.scenarionMCQ{
  .inCorrectOpt{
    .gmcq__item-option .gmcq__item-answer-icon{
      display: block !important;
    }
  } 
  .is-selected.inCorrectOpt {
    .gmcq__item-option .gmcq__item-answer-icon{
      display: block !important;
    }
  }
 
  .is-selected.correctOpt{
    .gmcq__item-option .gmcq__item-answer-icon{
      display: block !important;
    }
  }
         
  .correctOpt
  {
    .gmcq__item-option .gmcq__item-answer-icon{
      display: block !important;
    }
  } 
}
