/*
Taken from the GOV.UK component at
https://github.com/alphagov/static/blob/3d93a762b9d7af54615c77ae3e479131c03b8175/app/assets/stylesheets/govuk-component/_previous-and-next-navigation.scss
and
https://github.com/alphagov/static/blob/da8aeeaa749093eab30286d7fc9f965533b66f47/app/assets/stylesheets/styleguide/_conditionals2.scss
*/

// Media query helpers. These make producing IE layouts
// super easy.

// These are desktop and down media queries

// There is also a local version of this in Smartanswers.

$is-ie: false !default;

@mixin media-down($size: false, $max-width: false, $min-width: false) {
  @if $is-ie == false {
    @if $size == mobile {
      @media (max-width: 640px){
        @content;
      }
    } @else if $size == tablet {
      @media (max-width: 800px){
        @content;
      }
    }
  }
}

.govuk-previous-and-next-navigation {
  display: block;
  margin-top: govuk-spacing(6);
  margin-bottom: govuk-spacing(6);
  margin-left: -1 * govuk-spacing(3);
  margin-right: -1 * govuk-spacing(3);
  @include govuk-clearfix;

  ul {
    margin: 0;
    padding: 0;
  }

  li {
    @include core-16($line-height: (20 / 16));
    float: left;
    list-style: none;
    text-align: right;
    margin: 0;
    padding: 0;
    width: 50%;

    a {
      display: block;
      padding: govuk-spacing(3);
      text-decoration: none;

      &:hover {
        background-color: $canvas-colour;
      }

      &:focus {
        background-color: $govuk-focus-colour;
      }

      .pagination-part-title {
        @include core-27($line-height: (33.75 / 27));
        display: block;
      }
    }
  }

  .previous-page {
    float: left;
    text-align: left;
  }

  .next-page {
    float: right;
    text-align: right;
  }

  @include media-down(mobile) {
    .previous-page,
    .next-page {
      float: none;
      width: 100%;
    }

    .next-page a {
      text-align: right;
    }
  }

  .pagination-icon {
    display: inline-block;
    margin-bottom: 1px;
    height: .482em;
    width: .63em;
  }

  .pagination-label {
    display: inline-block;
    margin-top: 0.1em;
    text-decoration: underline;

    &:empty {
      display: none;
    }
  }
}