/* Next/Previous navigation */

// All navigation
.navigation {
  color: var(--global--color-primary-base);

  a {
    color: var(--global--color-primary-base);
    text-decoration: none;

    &:hover {
      color: var(--global--color-primary-lighten);
      text-decoration: underline;
      text-decoration-style: dotted;
    }

    &:focus {
      color: var(--global--color-secondary);
    }

    &:active {
      color: var(--global--color-primary-base);
    }
  }

  .nav-links {

    > * {
      display: flex;
      justify-content: center;
      align-items: center;
    }


    .nav-next a,
    .nav-previous a {
      display: flex;
      flex-direction: column;
      text-decoration: none;

      &:hover {
        .post-title {
          @include hover-underline();
        }
      }


    }

    .dots {
      text-align: center;
    }

    @include media(tablet) {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;

      .nav-next,
      .nav-previous {
        flex: 0 1 auto;
        margin-bottom: inherit;
        margin-top: inherit;
        max-width: calc(50% - (0.5 * var(--global--spacing-unit)));
      }

      .nav-next {
        text-align: right;
      }
    }
  }

  .svg-icon {
    display: inline-block;
    fill: currentColor;
    vertical-align: middle;
    position: relative;
  }


}

// Singular navigation
.post-navigation {

  @extend %responsive-aligndefault-width;

  margin: var(--global--spacing-vertical) auto;

  @include media(desktop) {
    margin: var(--global--spacing-vertical) auto;
  }


  .meta-nav {
    line-height: var(--global--line-height-body);
    color: var(--global--color-text-lighten);
    font-size: var(--global--font-size-sm);
    text-transform: uppercase;
    margin-bottom: var(--global--spacing-vertical-sm);
  }

  .post-title {
    display: inline-block;
    font-family: var(--global--font-primary);
    font-size: var(--global--font-size-sm);
    font-weight: normal;
    line-height: var(--global--line-height-sm);
    @include media(desktop) {
      margin: 5px 0 0;
    }
  }

  .nav-links {

    a {
      color: var(--global--color-text-base);

      .meta-nav {
        color: var(--global--color-text-lighten);
      }
    }

    @include media(mobile) {
      justify-content: space-between;
    }
  }

  .nav-next,
  .nav-previous {
    margin-top: var(--global--spacing-vertical);
    margin-bottom: var(--global--spacing-vertical);

    &:first-child {
      margin-top: 0;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  .nav-previous .svg-icon,
  .prev .svg-icon {
    margin-right: calc(0.25 * var(--global--spacing-unit));
  }

  .nav-next .svg-icon,
  .next .svg-icon {

    margin-left: calc(0.25 * var(--global--spacing-unit));
  }
}

// Index/archive navigation
.pagination,
.comments-pagination {


  padding-top: var(--global--spacing-vertical);
  margin: var(--global--spacing-vertical) auto;

  @include media(desktop) {
    margin: var(--global--spacing-vertical) auto;
  }

  @extend %responsive-alignwide-width;

  // Resets the top margin added to the .nav-links items below.
  .nav-links {
    margin-top: calc(-1 * var(--global--spacing-vertical));

    a:hover {
      color: var(--pagination--color-link-hover);
    }

    .is-dark-theme & {

      a:active,
      a:hover:active,
      a:hover:focus {
        color: var(--global--color-background);
      }
    }

    .has-background-white & {

      a:active,
      a:hover:active,
      a:hover:focus {
        color: var(--global--color-invert);
      }
    }
  }

  color: var(--global--color-primary-base);

  a {
    color: var(--global--color-primary-base);
    text-decoration: none;

  }

  .nav-links {

    > * {
      color: var(--pagination--color-text);
      font-family: var(--pagination--font-family);
      font-size: var(--pagination--font-size);
      font-weight: var(--pagination--font-weight);
      margin-top: var(--global--spacing-vertical);
      margin-right: 5px;
      background: var(--pagination--link-background);
      width: 30px;
      height: 30px;
      min-width: 30px;
      min-height: 30px;
      border-radius: 50px;
      display: flex;
      justify-content: center;
      align-items: center;


      &.current,
      &:hover {

        background: var(--pagination--link-background-current);


      }

    }


    @include media(tablet) {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
    }


  }

  .svg-icon {
    display: inline-block;
    fill: currentColor;
    vertical-align: middle;
    position: relative;
    margin: 0;
  }
}

// Comments pagination
.comments-pagination {
  padding-top: calc(0.66 * var(--global--spacing-vertical));
  margin: calc(3 * var(--global--spacing-vertical)) auto;

  @include media(desktop) {
    margin: calc(3 * var(--global--spacing-vertical)) auto calc(4 * var(--global--spacing-vertical)) auto;
  }

  .nav-links > * {
    font-size: var(--global--font-size-md);
  }
}