@import "base/variables.less";
@import "base/mixins.less";

#toggle-menu {
  display: none;
  float: right;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 20px;
  font-family: @second-font;
  color: #2d2d2d;

  @media @tablet, @mobile {
    display: block;
  }

  &:hover, .active & {
    color: @colored;
  }
}

.main-menu {
  display: block;
  .c;
  float: right;
  margin-right: -30px;

  .avatar {
    width: 50px;
  }

  @media @1270 {
    margin-right: 0;
  }

  @media @mobile, @tablet {
    position: absolute;
    left: -9999px;
  }

  > li {
    float: left;

    &:first-child {
      margin-left: 0;
    }

    &.active a {
      color: @colored;
    }

    &.login a {
      color: @colored-2;
    }

    &.facebook {
      margin-left: 0;

      a {
        font-size: 40px;
        padding: 0;

        @media @tablet, @mobile {
          font-size: 30px;
        }
      }
    }

    > a {
      display: block;
      font-weight: bold;
      text-decoration: none;
      color: #181818;
      font-size: 20px;
      padding: 0 25px;
      text-transform: uppercase;
      font-family: @second-font;

      @media @1270 {
        padding: 0 20px;
      }

      @media @1120 {
        padding: 0 15px;
      }

      @media @tablet, @mobile {
        font-size: 15px;
        padding: 0 20px;
      }

      &:hover {
        color: @colored;
      }
    }
  }
}

.active .main-menu {
  left: 0;
  top: 70px;
  z-index: 20;
  width: 100%;
  line-height: 50px;

  > li {
    float: none;
    border: 1px solid lighten(@colored, 10%);

    &.facebook a {
      font-size: 18px;
      padding: 0 20px;
    }

    > a {
      .transition-none;
      background-color: @colored;
      color: @light;

      &:hover {
        color: @colored-2;
        background-color: darken(@colored, 10%);
      }
    }
  }
}