@import './src/assets/Constants';

.navbar,
.navbar-brand-container,
.navbar-links-container,
.navbar-account-container {
  display: flex;
  align-items: center;
}

.navbar {
  padding: 0 15px;
  height: 60px;
  border-bottom: 1px solid $tgb-border-color;
  &.dark {
    background: #303030;
    color: #FFF;

    .navbar-brand {
      color: #9AAAAD
    }
  }
}

.navbar-brand-container {
  margin-right: 15px;

  .navbar-logo {
    height: 45px;
    border-radius: 3px;
  }

  .navbar-brand {
    display: flex;
    font-size: 1.1em;
    padding: 0 5%;
    font-weight: 600;
    white-space: nowrap;
    color: #6A7B7F;
  }
}

.navbar-links-container {
  .navbar-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 0.9em;
  }

  .nav-link {
    padding: 0 2%;
    transition: all 0.3s ease-in-out;
  }

  .nav-link.active,
  .nav-link:hover {
    color: #2bacca;
    cursor: pointer;
  }

  .underline .nav-link:hover,
  .underline .nav-link.active {
    border-bottom: 1px solid #2bacca;
  }

  .nav-icon {
    margin: 0 6px;
  }

  .nav-icon:last-child {
    margin-right: 0;
  }

  .nav-icon:hover {
    opacity: 1;
    cursor: pointer;
  }

  // TODO: remove this once icons are pulled in from Thu
  .help-icon {
    width: 22px;
    height: auto;
    vertical-align: middle;
  }
}

.navbar-links-left {
  flex-grow: 1;
}

@media (max-width: 767px) {
  // left section
  .navbar-brand {
    font-size: .8em;
  }
  .navbar-logo {
    height: 30px;
  }
  // middle section
  .navbar-links-container {
    position: relative;
    display: flex;
    align-items: center;
  }
  .navbar-links {
    flex-direction: column;
    justify-content: center;
    text-align: left;
    position: fixed;
    height: 100vh;
    width: 50vw;
    left: -50%;
    top: 0;
    background-color: #d9d8e6;
    border-radius: 2px;
    z-index: 9;
  }
  .dark .navbar-links {
    background: #303030;
    color: #FFF;
  }
  .nav-link {
    padding: 10% 0;
  }
  .nav-link:hover {
    color: #2bacca;
    cursor: pointer;
  }
  .nav-link.active {
    color: #2bacca;
    font-weight: 600;
  }
}