index.scss

.question-container {
  padding-bottom: 20px;

  .question {
    font-size: 16px;
    color: #222;
    margin-bottom: 21px;
    padding: 0 17px;
    white-space: pre-line;

    .category {
      padding: 2px 5px 3px;
      border: 1px solid #09f;
      border-radius: 3px;
      font-size: 12px;
      color: #09f;
    }
  }

  .options {
    li {
      display: flex;
      min-height: 48px;
      padding: 0 17px;
      align-items: center;
      font-size: 16px;
      color: #333;
      margin-bottom: 12px;

      &.active {
        background: #f8f8fb;

        .letter {
          color: #09f;
          border-color: #09f;
        }
      }

      &.correct {
        .letter {
          background-color: #29c8a0;
          color: #fff;
          border: 1px solid #29c8a0;
        }
      }

      &.error {
        .letter {
          background-color: #ff5a5a;
          color: #fff;
          border: 1px solid #ff5a5a;
        }
      }
    }
  }

  .letter {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin-right: 13px;
    border: 1px solid #999;
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
  }
}