@import (reference) "fonts";
@import (reference) "colors";
@import (reference) "grid";

@navbar-height: 60px;
@navbar-bottom-space: 25px;
@sidebar-width: 200px;

.navbar {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  height         : @navbar-height;
  padding-left   : 1rem;
  padding-right  : 1rem;

  &__left &__link { margin-right: 1rem; }
  &__right &__link { margin-left: 1rem; }

  &__right {
    display: flex;
    align-items: center;
  }

  &__left .logo--large {
    height: 30px;
    width: auto;
  }

  &__link, a {
    text-decoration: none;
    color: @color--gray;
    &:visited { color: @color--gray; }
    &:hover { color: darken(@color--gray, 2%); }
    &:active { color: darken(@color--gray, 5%); }
    &.button { color: @color--white; }
  }

  &--white &__link {
    color: @color--white;
    &:visited { color: @color--white; }
    &:hover { color: darken(@color--white, 2%); }
    &:active { color: darken(@color--white, 5%); }
    &.button--white { color: @color--blue; }
  }

  .button, .button--white {
    .font--content(@font-size--body-md);
    padding: (@font-size--body-md / 1.5) (@font-size--body-md * 1.5);
  }

  &__menu-trigger:hover {
    cursor: pointer;
  }

  .icon-arrow-down:before {
    margin-left: 6px;
    font-size: 12px;
  }
}

.navbar__dropdown {
  @size: @font-size--body-xs;
  margin-top: 12px;
  margin-left: -12px;
  a {
    text-decoration: none;
    color: @color--gray;
    &:visited { color: @color--gray; }
    &:hover { color: darken(@color--gray, 2%); }
    &:active { color: darken(@color--gray, 5%); }
    &.button { color: @color--white; }
  }

  li {
    .font--header(@size);
    white-space: nowrap;
    padding: @size (@size * 2) !important;
    border-bottom: 1px solid @color--gray-lighter;
    font-weight: lighter;
    text-transform: uppercase;
    letter-spacing: 0.2em;
  }

  a:last-child li {
    border-bottom: none;
  }

  .icon-profile { color: @color--red; }
  .icon-table-logo { color: @color--orange; }
  .icon-gear { color: @color--blue; }
  .icon-add-person { color: @color--pink; }
  .icon-faq { color: @color--purple; }
  .icon-legal { color: @color--green; }
  .icon-leave { color: @color--gray; }

  [class^="icon-"]:before, [class*=" icon-"]:before {
    margin-right: @size / 2;
    font-size: @size * 1.3;
  }
}

/*
body.with-navbar {
  position: relative;
  padding-top: @navbar-height + @navbar-bottom-space;
}
*/

/*
.navbar {
  height: @navbar-height - 10px;
  width: 100%;
  border-bottom: 1px solid @color--gray;
  position: fixed;
  background: @color--off-white;
  position: fixed;
  top: 0;
  left: 0;
  padding-top: 10px;
  z-index: 100;
}
*/

/*
.sidebar {
  position: fixed;
  display: block;
  padding: 0;
  margin: 0;
  height: 100%;
  width: @sidebar-width;
  list-style: none;

  .navbar + .container > & {
    height: calc(~"100% - " @navbar-height + @navbar-bottom-space + 1px);
  }

  .link {
    margin-left: 15px;
  }

  .label {
    margin-bottom: 5px;
  }

  &__spacing {
    padding-top: 25px;
  }

  &__link {
    padding: 0 0 0.3rem;
  }

  &--content {
    padding-left: @sidebar-width;
  }
}

.fixed-height-container {
  // height: 100%;
  // overflow-y: auto;
  overflow-x: hidden;

  .navbar + .container > & {
    height: calc(~"100% - " @navbar-height + @navbar-bottom-space + 1px);
  }
}
*/