@import "./../../../styles/global.scss";



.header {
  display: flex;
  margin: 1.5rem 2rem;
  justify-content: space-between;
  align-items: center;
  line-height: 0;
}

.nav {
  display: flex;
  align-items: center;
}

.logo {
  height: 2.5rem;
}

.nav-item-logo {
  margin-right: 1rem;
  padding: 0.5rem 1rem;
}

.nav-item {
  margin-right: 1rem;
  padding: 0.5rem 1rem;
  line-height: 1.35;

  &.active {
    color: $dark-blue;
    background-color: $grey-light;
  }
}

.username-label {
  margin: 1rem;
}

.user-info {
  display: flex;
}

.logout-button {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  margin-left: 0.5rem;
  border-width: 0;
  background-color: white;
  cursor: pointer;
}


// use in tandem with MobileNavigationBar - this disappears for smaller screen sizes
@media (max-width: 1023px) {
  .header {
    display: none;
  }

 }