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

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

.questionDescriptionUnorderedList {
  @include theme(background-color, ePrimaryMuted);
  @include spacing(0.5rem 0);
  border-radius: 0.25rem;

  & li {
    @include theme(color, contrast1Opacity90);
    margin-left: 1.5rem;

    @media screen and (min-width: 1200px) {
      margin-left: 2rem;
    }
  }
}

.questionDescriptionOrderedList {
  @include theme(background-color, ePrimaryMuted);
  @include spacing(0.5rem 0);
  border-radius: 0.25rem;

  & > li {
    @include theme(color, contrast1Opacity90);
    margin-left: 2.25rem;

    @media screen and (min-width: 1200px) {
      margin-left: 2.75rem;
    }

    & li {
      @include theme(color, contrast1Opacity90);
      margin-left: -1rem;
    }
  }
}

.recipeContainer {
  @include spacing(1rem);
  align-self: stretch;
  border-radius: 0.25rem;

  .recipeTitle {
    @include theme(color, ePrimary);
    font-size: 1.5rem;
    margin-bottom: 1rem;

    @media screen and (min-width: 1200px) {
      font-size: 2.5rem;
    }
  }

  .recipeSectionTitle {
    @include spacing($margin: 0.5rem 0);
    @include theme(color, eSecondary);
    font-size: 1.25rem;

    @media screen and (min-width: 1200px) {
      font-size: 1.5rem;
    }
  }

  & li {
    @include theme(color, contrast1Opacity90);
    font-size: 0.95rem;

    @media screen and (min-width: 1200px) {
      font-size: 1rem;
    }
  }
}
