@import '../../constants/theme.scss';
@import '../../utils/mixins.scss';

.questionDetails {
  & li {
    @include theme(color, contrast1Opacity90);
  }
}

.questionDescription {
  @include spacing(0 0.25rem);
  word-break: break-word;
  white-space: break-spaces;
}

.questionTitle {
  @include theme(color, ePrimary);
}

.break {
  @include spacing($margin: 0.5rem 0);
}

.questionDescriptionHighlight {
  @include spacing(0 0.25rem);
  @include theme(color, contrast1Opacity90);
  @include theme(background-color, eSecondaryDeep);
  border-radius: 0.25rem;
}

.codeBlock {
  @include spacing(0.5rem 0.75rem);
  @include theme(background-color, ePrimaryDark);
  overflow-x: auto;
  border-radius: 0.5rem;

  @media screen and (min-width: 1200px) {
    @include spacing(0.75rem 1rem);
  }
}

.codeWrapper {
  @include spacing(0.5rem 0);
}

.codeBlockHeader {
  @include spacing(0.5rem 0);
  @include theme(color, contrast1);
}

.comment {
  color: $grey-3;
}

.output {
  color: $light;
  padding: 0 !important;
  margin: 0 !important;
}

.solutionContainer {
  @include spacing($margin: 1rem 0);
  border-radius: 0.25rem;
  max-width: 50rem;
}
