@import '@/sass/style.scss';

.QuizQuestion {
  width: 100%;

  h4,
  .question {
    padding: 0 16px;
  }

  h4 {
    text-transform: capitalize;
  }

  .question {
    @include margin-bottom-not-last-child(20px);
  }

  .answer,
  .answer--answered {
    .answer-head {
      background-color: $very-dark-green;
      display: block;
      line-height: normal;
      margin-bottom: 2px;
      min-height: 72px;
      padding: 16px 52px 16px 68px;
      position: relative;
      text-align: left;
      width: 100%;

      .letter {
        align-items: center;
        background-color: $mostly-black-green;
        border-radius: 50%;
        color: $very-soft-green;
        display: flex;
        font-size: 16px;
        font-weight: 900;
        height: 36px;
        justify-content: center;
        left: 16px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 36px;
      }

      .arrow {
        position: absolute;
        right: 12px;
        top: 50%;
        transition: transform 200ms;
        width: 28px;

        svg {
          display: block;
          fill: $very-soft-green;
          height: auto;
          width: 100%;
        }
      }
    }

    .answer-body {
      background-color: $very-mostly-black-green;
      max-height: 0;
      overflow: hidden;
    }
  }

  .answer {
    .answer-head {
      .arrow {
        transform: translateY(-50%) rotate(0);
      }
    }

    .answer-body {
      max-height: 0;
      opacity: 0;
      padding: 0 32px;
      transition: max-height 200ms, padding 200ms, opacity 200ms;
    }
  }

  .answer--answered {
    .answer-head {
      .arrow {
        transform: translateY(-50%) rotate(180deg);
      }
    }

    .answer-body {
      max-height: 999em;
      opacity: 1;
      padding: 20px 32px;
      transition: max-height 400ms, padding 400ms, opacity 400ms;
    }
  }
}
