/*------------------------------------*\
  $SECONDARY NAVIGATION
\*------------------------------------*/

$secondary-nav-height: 50px;
$secondary-nav-alignment: right;
$secondary-nav-background-color: #f4f4f4;
$secondary-nav-border-color: #e4e4e4;

.secondary-nav {
  display: none;
  overflow: hidden;
  background: {
    color: $secondary-nav-background-color;
  }
  border-bottom: 1px solid $secondary-nav-border-color;

  @include mq(mq960) {
    display: block;
  }

  ul {
    overflow: hidden;
    margin: 0;
    float: $secondary-nav-alignment;
  }

  li {
    display: inline-block;
    float: left;
    height: $secondary-nav-height;
    font-size: font-size(13);

    &:first-child a {
      border-left: 1px solid $secondary-nav-border-color;
    }

    &.social {
      a { padding: 0 20px; }
    }

    img,
    svg {
      width: 22px;
      height: 22px;
    }

    svg {
      position: relative;
      top: 7px;
    }

    .twitter {
      fill: $twitter;
    }

    .facebook {
      fill: $facebook;
    }

    .linkedin {
      fill: $linkedin;
    }

    .share {
      fill: $brand;
    }
  }

  a {
    padding: 0 25px;
    float: left;
    height: $secondary-nav-height;

    color: $dark-grey;
    text-decoration: none;
    line-height: $secondary-nav-height;

    border-right: 1px solid $secondary-nav-border-color;

    @include states {
      color: $brand;
    }
  }
}