//
// Core: Main Header
//

.main-header {
  grid-area: main-header;
  background-color: $white;
  border-bottom: $main-header-bottom-border;
  width: inherit;
  z-index: $zindex-main-header;

  .nav-link {
    color: $dark;

    &:hover,
    &:focus {
      color: $black;
    }
  }
}

.layout-navbar-fixed {
  .main-header {
    // position: fixed;
  }

  .content-wrapper {
    // margin-top: $main-header-height;
  }
}

@include dark-mode() {
  .main-header {
    background-color: $dark-alt;
    border-bottom-color: tint-color($dark-alt, 10%);

    .nav-link {
      color: $gray-400-alt;

      &:hover,
      &:focus {
        color: $white-alt;
      }
    }
  }
}

//