ahbeng/NUSMods

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

$vert-padding: 0.5rem;
// Keep padding at whole number, 0.875rem = 14px
// See: https://github.com/nusmodifications/nusmods/pull/1567
$logo-vert-padding: 0.875rem;

.navbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: $navbar-z-index;
  display: flex;
  justify-content: space-between;
  height: $navbar-height;
  padding: 0; // For Microsoft Edge 18
  padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
  background: var(--gray-lightest);
}

.brand {
  display: flex;
  // Explicit width so the logo will not expand
  // to occupy the entire navbar
  width: 12rem;
  padding: $logo-vert-padding $grid-gutter-width;
}

.brandLogo {
  width: 100%;
}

.navRight {
  display: flex;
  align-items: center;
  padding: $vert-padding $grid-gutter-width*0.5;
}

.weekText {
  padding-left: $grid-gutter-width*0.5;
  font-size: $font-size-xs;
  line-height: 1.15;
  text-align: right;
}

@include media-breakpoint-up(xl) {
  .brand {
    // Padding to match navtab left padding
    padding-left: 2rem;
  }

  .navRight {
    padding: $vert-padding $grid-gutter-width*0.5 $vert-padding 2rem;
  }
}

@include media-breakpoint-down(xs) {
  .navRight {
    display: none;
  }

  .brand {
    flex: 1;
    padding: $logo-vert-padding 0;
  }
}