@use 'pix-design-tokens/typography';

.correction-qrocm__answer {
  &--paragraph {
    display: block;
    width: 100%;
  }

  &--sentence {
    display: block;
    width: 100%;
  }

  &--input {
    display: inline-block;
    padding: var(--pix-spacing-1x) var(--pix-spacing-1x) var(--pix-spacing-1x) 0;
    vertical-align: 0;

    &:not(:last-child) {
      padding-left: 0;
    }
  }

  &.correction-qroc-box-answer--wrong,
  &.correction-qroc-box-answer--aband,
  &.correction-qroc-box-answer--timeout {
    vertical-align: -2.5em;
  }
}

.correction-qrocm-answer {
  &__input-paragraph {
    display: block;
    width: 100%;
  }

  &-answer__input-sentence {
    display: block;
    width: 100%;
  }

  &-answer__input {
    display: inline-block;
    width: auto;
    max-width: 100%;
  }
}

.correction-qrocm__text {
  padding-inline: 12px;
}

.correction-qrocm-text {
  &__label {
    display: inline;
    padding: var(--pix-spacing-1x) var(--pix-spacing-1x) var(--pix-spacing-1x) 0;

    &:not(:last-child) {
      padding-left: 0;
    }
  }
}

.correction-qrocm__solution {
  display: flex;
  align-items: center;

  &-text {
    @extend %pix-body-m;

    margin: var(--pix-spacing-1x) 0 var(--pix-spacing-2x);
    color: var(--pix-success-700);
    font-weight: var(--pix-font-bold);
  }
}
