ahbeng/NUSMods

@import '~styles/utils/modules-entry';

$header-margin-top: 1rem;
$sticky-top: $navbar-height;

.pageTitle {
  margin: 0 0 0.5rem;
  font-size: $font-size-xlg;
}

.moduleInfoPage {
  max-width: 80rem;
  margin-left: 0;

  :global {
    animation-name: $page-entering-animation;
  }
}

.archiveWarning {
  display: flex;
  align-items: center;

  p {
    max-width: 40rem;
    margin: 0;
  }

  .archiveIcon {
    flex: 0 0 2rem;
    height: 2rem;
    margin-right: 1.2rem;
  }
}

.moduleCodeTitle {
  display: block;
  margin-bottom: 0.2rem;
  font-weight: bold;
  font-size: $font-size-xlg * 1.2;
  color: theme-color();
}

.header {
  padding: 0 0 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--gray-lighter);

  p {
    margin-bottom: 0;
  }
}

.sectionHeading {
  padding: 0.6rem 0;
  margin: 0 0 0.6rem;
  border-bottom: 1px solid var(--gray-lighter);
  font-weight: $font-weight-bold;
  font-size: $font-size-lg;
}

.descriptionHeading {
  margin-bottom: 0;
  font-weight: bold;
  font-size: 1rem;
}

.details {
  overflow-wrap: break-word;

  dt,
  h4 {
    font-weight: bold;
    font-size: $font-size-sm;
  }
}

.attributes {
  composes: list-unstyled from global;

  .checkmark {
    width: 1.2rem;
    margin: 0 0.2rem 0 0.5rem;
    color: theme-color(success);
  }
}

.section {
  // Account for the fixed header's height. If this is not done, when side menu links are
  // clicked a portion of the content will be clipped by the fixed header.
  padding-top: $sticky-top;

  &.firstSection {
    margin-top: -$sticky-top;
  }
}

@include media-breakpoint-down(sm) {
  .pageTitle,
  .moduleCodeTitle {
    font-size: $font-size-xlg * $sm-font-size-ratio;
  }

  .descriptionHeading {
    font-size: 1rem * $sm-font-size-ratio;
  }

  .sectionHeading {
    font-size: $font-size-lg * $sm-font-size-ratio;
  }
}

.exam {
  margin-bottom: 1rem;

  p {
    margin-bottom: 0;
  }
}

.gradingBasisDescription {
  margin-bottom: 1rem;

  p {
    margin-bottom: 0;
  }
}

.addToTimetable {
  margin-bottom: 1rem;
}

.modReviewDescription {
  padding: 0.3rem 0 0 1.6rem;
}

.reviews {
  max-width: 40rem;
}

.reviewsBanner {
  $bottom-margin: 0.5rem;

  h3 {
    margin-bottom: $bottom-margin;
    font-weight: $font-weight-bold;
    font-size: 1rem;
  }

  p {
    margin-bottom: $bottom-margin;
    font-size: $font-size-sm;

    &:last-child {
      margin-bottom: 0;
    }
  }

  li {
    font-size: $font-size-sm;
  }
}

.sideMenu {
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  a {
    display: block;
    padding: 0.4rem 0 0.4rem 1rem;
    border-left: 0.3rem solid var(--gray-lighter);
    color: var(--gray-light);
  }

  .activeMenuItem a {
    border-color: theme-color();
    font-weight: bold;
    color: theme-color();
  }

  @include media-breakpoint-down(sm) {
    padding: 0 1rem;

    a {
      // Make the links a little larger on mobile so they're easier to tap
      padding: 0.7rem 0 0.7rem 1.3rem;
      font-size: 1.2rem;
    }
  }
}