@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, eSecondary);
}

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

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

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

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

.solutionContainer {
  @include spacing($margin: 1rem 0);
  border-radius: 0.25rem;
  max-width: 40rem;
  display: flex;
  flex-direction: column;
  max-height: 60vh;
}

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

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

.solutionHeader {
  @include theme(color, contrast2);
  letter-spacing: -0.25px;
  margin-bottom: 1rem;
  font-size: 1.75rem;
}

.testimonialsContainer {
  @include spacing(1rem 0.75rem);
  @include theme(background-color, grey2);
  border-radius: 0.5rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}

.note {
  color: $grey-4;
  font-size: 0.9em;
}
