@import '../variables/all';
@import '../mixins/all';
@import '../icons';

.rm-nav-bar {
  background-color: $nav-bar-bgc;
  width: 100%;
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
  @include clearfix;
}

.rm-nav-bar--secondary {
  background-color: $white;
  .rm-nav-bar__item {
    height: 40px;
    line-height: 40px;

    > .rm-nav-bar__item-link {
      color: $black;
      font-weight: $normal-weight;
    }

    &:hover {
      background-color: inherit;

      > .rm-nav-bar__item-link {
        color: $light-blue;
      }
    }
  }
}

.rm-nav-bar--vertical {
  > .rm-nav-bar__item {
    display: block;
    float: none;
    padding: 0;
    min-width: 120px;
  }
}

.rm-nav-bar__item {
  float: left;
  height: 50px;
  @include display-flex;
  @include align-items(center);
  padding: 0 14px;
  @include transition($transition-slow);
  text-decoration: none;

  &.rm-nav-bar__item--active {
    background-color: $water-blue;
    color: $nav-bar-item-active-color;
  }

  &.rm-nav-bar__item--right {
    float: right;
  }

  &:hover, &.open {
    background-color: $water-blue;
    cursor: pointer;
    @include transition($transition-slow);
    text-decoration: none;
  }

  &.rm-nav-bar__item--with-hover-effect:hover {
    .rm-nav-bar__item-link {
      text-decoration: underline;
    }
  }
}

.rm-nav-bar__item-link {
  color: $nav-bar-item-color;
  @include fontSizeL();
  font-weight: $semi-bold-weight;
  font-family: $main-font;
  vertical-align: middle;
}

.rm-nav-brand > .rm-nav-icon,
.rm-nav-brand > .rm-nav-bar__item-link {
  color: $nav-bar-brand-color;
}

.rm-nav-brand > .rm-nav-icon {
  margin-right: 5px;
}

.rm-nav-brand > .rm-nav-bar__item-link {
  font-size: 20px;
}

.rm-nav-icon {
  width: 30px;
  color: $nav-icon-base-color;
  font-size: 24px;
  padding-right: 8px;
}

.rm-nav-bar__item--user-menu {
  margin-right: 14px;
  cursor: $cursor-pointer;
  &.open{
    background-color: $dodge-blue;
  }
  &:hover {
    background-color: $dodge-blue;
    @include transition($transition-slow);
      .avatar {
        background-color: darken($water-blue, 5%);
      }
  }
}

.rm-nav-drop-down-icon {
  @include fontSizeXS;
  margin-left: $space-lvl1;
  color: $twilight-blue;
  vertical-align: middle;
  @extend .icon-arrow-down;
}

.rm-nav-brand {
  &.rm-nav-bar__item {
    cursor: default;
  }

  &:hover {
    background-color: $dodge-blue;
    @include transition($transition-slow);
    a, i {
      @include transition($transition-slow);
    }
  }
}