@import "src/variables.scss";

.navbar {
  align-items: center;
  background: $black;
  color: $white;
  display: flex;
  height: $navbar-height;
  justify-content: space-between;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2;

  a, button {
    color: $white;
    cursor: pointer;
    font-size: 16px;
    text-decoration: none;

    &.active {
      font-weight: 800;
    }
  }

  .left {
    font-weight: 800;
    padding: $navbar-item-padding;
  }

  .right {
    padding: $navbar-item-padding;

    button {
      background: transparent;
      border: none;
    }

    > a, button {
      padding: $navbar-item-padding 15px;

      @media all and (max-width: 400px) {
        padding: $navbar-item-padding 7.5px;
      }
    }

    .mobile {
      @media all and (min-width: 0px) and (max-width: 350px) {
        display: initial;
      }

      @media all and (min-width: 351px) {
        display: none;
      }
    }

    .desktop {
      @media all and (min-width: 0px) and (max-width: 350px) {
        display: none;
      }

      @media all and (min-width: 351px) {
        display: initial;
      }
    }
  }
}

.subnav {
  background: #676565;
  display: flex;
  flex-flow: column;
  justify-content: center;
  position: fixed;
  right: 0;
  top: $navbar-height;
  z-index: 2;

  a {
    color: white;
    cursor: pointer;
    padding: 10px 15px;
    text-decoration: none;

    &.active {
      color: white;
      font-weight: 800;
      border-radius: 2px;
    }
  }

  .separator {
    background: #b3b3b3;
    height: 3px;
  }
}

.gray {
  color: #999;
}

.hamburger {
  div {
    background: $white;
    cursor: pointer;
    height: 3px;
    margin: 5px 0;
    width: 30px;
  }

  &:hover div {
    background: #72a8fd;
  }
}
