//
// Pager
// --------------------------------------------------

.pager {
  background-color: @brand-primary;
  border-radius: @border-radius-large;
  color: @inverse;
  font-size: 16px;
  font-weight: 700;
  display: inline-block;

  li {
    &:first-child {
      > a,
      > span {
        border-left: none;
        border-radius: @border-radius-large 0 0 @border-radius-large;
      }
    }

    > a,
    > span {
      background: none;
      border: none;
      border-left: 2px solid mix(@brand-primary, black, 85%);
      color: @inverse;
      padding: @pager-padding;
      text-decoration: none;
      white-space: nowrap;
      border-radius: 0 @border-radius-large @border-radius-large 0;
      line-height: 1.313;

      &:hover,
      &:focus {
        background-color: mix(@brand-primary, black, 85%);
      }
      &:active {
        background-color: mix(@brand-primary, black, 85%);
      }

      // Add some spacing between the icon and text
      [class*="fui-"] + span {
        margin-left: 8px;
      }
      span + [class*="fui-"] {
        margin-left: 8px;
      }
    }
  }
}