/// Provides styles for the Paginator element.
/// @group layout
/// @author Richard Davis
/// @example
///   // A wrapper around pagination controls to apply styles to child elements.
///   <div class="Paginator">
///     <a href="#">Prev</a>
///     <a href="#">Next</a>
///     <p>Displaying records 11-20</p>
///   </div>
.Paginator {
  font-family: $heading-semibold-font-family;
  text-transform: uppercase;
  text-align: center;
  margin-top: spacing-size(6);
  margin-bottom: spacing-size(6);

  a {
    color: $black;
    margin-left: spacing-size(4);
    margin-right: spacing-size(4);

    @include breakpoint-m {
      margin-left: spacing-size(6);
      margin-right: spacing-size(6);
    }

    &:hover {
      color: theme-color("primary");
    }
  }

  p {
    margin-top: spacing-size(4);
    margin-bottom: spacing-size(4);
  }
}