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

.pageContainer {
  @include spacing(0);
  flex-direction: column;
}

.navbar {
  @include theme(background-color, eSecondaryDeep);
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  @media screen and (min-width: 1200px) {
    flex-direction: row;
  }
}

.navItems {
  @include spacing(0, 0);
  display: flex;
  flex-direction: column;

  @media screen and (min-width: 1200px) {
    flex-direction: row;
  }

  & li {
    @include spacing(1rem 1.5rem);
    @include theme(color, contrast1);
    list-style: none;
    font-size: 0.9rem;

    &:hover {
      @include theme(background-color, eSecondaryMuted);
      cursor: pointer;
    }

    &:last-of-type {
      border-right: none;
    }

    @media screen and (min-width: 1200px) {
      font-size: 1rem;
      border-right: 1px solid rgba($color: $light, $alpha: 0.1);
    }
  }
}

.questionDetails {
  @include spacing(2rem);

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

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

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