.page-menu, .project__menu, .organization-menu {
  &--horizontal {
    @include clearfix;
    border-bottom: 1px solid darken($blue--lighter, 10%);
    list-style-type: none;
    margin-bottom: 10px;
    padding: 0;
    width: 100%;

    @include media($sm-screen) {
      overflow-x: scroll;
      white-space: nowrap;
    }

    li {
      display: inline-flex;
      font-size: $body-font-size-normal;
      height: 100%;
      margin-right: -4px;
    }

    a {
      border-bottom: 3px solid transparent;
      color: $text--lightest;
      display: block;
      font-weight: 500;
      height: 100%;
      margin-bottom: -1px;
      padding: 9px 10px;
      text-decoration: none;

      &.active, &:hover {
        border-bottom-color: $blue;
        color: $blue;

        span.info {
          background: $blue--light;
        }
      }

      &.active {
        font-weight: 700;
      }

      &:hover {
        transition: border-bottom-color ease 0.3s;
      }

      i {
        padding-right: 3px;
      }

      span.info {
        background: $gray--light;
        border-radius: 4px;
        color: white;
        display: inline-block;
        font-size: $body-font-size-small;
        font-weight: 300;
        margin-left: 5px;
        padding: 1px 7px 2px 7px;
        vertical-align: 1px;

        strong {
          font-weight: 700;
        }
      }
    }
  }
}
