/*
 * Up next
 */

.markdown-body.-literate .see-also,
.markdown-body .see-also,
.markdown-body.-literate .up-next,
.markdown-body .up-next {
  clear: both;

  @media (min-width: 769px) {
    @include ms-respond(padding-top, 10);
  }

  &, > p {
    width: auto;
    float: none;
    padding-right: 0;
  }
}

// Reduce space when preceded by `details`
.markdown-body details + .up-next,
.markdown-body.-literate details + .up-next {
  @media (min-width: 769px) {
    @include ms-respond(padding-top, 7);
  }
  @media (max-width: 768px) {
    margin-top: 16px;
  }
}

.markdown-body.-literate .see-also,
.markdown-body .see-also {
  @media (min-width: 769px) {
    text-align: right;
    margin-bottom: -2.7em;
  }

  & + .up-next {
    padding-top: 0;
  }

  a[href^='http'] {
    margin-left: .5em;
  }

  // External links
  a[href^='http']::after {
    @include ion-icon('arrow-up-c');
    transform: rotate(45deg);
    margin: 0 .2em;
    opacity: .5;
    font-size: .9em;
    margin-left: .4em;
  }

  // Line
  // @media (max-width: 480px) {
  //   &::before {
  //     @include hr-rule;
  //     margin-top: 16px;
  //     margin-bottom: 16px;
  //   }
  // }
}

.markdown-body.-literate .up-next,
.markdown-body .up-next {
  > p {
    color: $black;
    font-style: normal;
    font-family: $sans;
    font-size: 1em;
  }

  &:before {
    @include hr-rule;
    margin-bottom: 16px;
  }

  // The button
  > p > a {
    margin-left: 10px;
    font-weight: bold;
    font-family: $sans;
    font-style: normal;
    text-transform: uppercase;
    font-size: .95em;
    letter-spacing: .02em;
  }

  > p > a::after {
    @include ion-icon('chevron-right');
    margin-left: 8px;
    font-size: .95em;

    position: relative;
    top: -1px;
  }
}

/*
 * Button-on-the-left layout
 */

.markdown-body.-literate .up-next,
.markdown-body .up-next {
  > p {
    line-height: 2.3em;
    font-size: .9em;
    font-family: $serif;
    font-style: italic;
  }

  @media (min-width: 481px) {
    > p {
      color: $gray;
    }
  }

  > p > a {
    font-size: 1em;
    line-height: 1em;
    display: inline-block;
    padding: 8px 12px;
    border: solid 1px rgba($teal, .5);
    border-radius: 3px;
    position: relative;
  }

  // Invisible hit area
  > p > a::before {
    @include hit-area(32px, 96px, 32px, 32px);
  }

  > p > a::after {
    // content: '\f35d';
    color: $teal;
    top: 0;
  }

  > p > a:hover,
  > p > a:focus {
    text-decoration: none;
    background: rgba($blue, .5);
    border-color: transparent;
    color: white;

    &::after {
      color: white;
      opacity: .5;
    }
  }

  // New line before button
  // @media (max-width: 768px) {
  //   > p > span {
  //     display: block;
  //     margin-bottom: 4px;
  //   }

  //   > p > a {
  //     margin-left: 0;
  //   }
  // }

  @media (min-width: 9px) {
    > p > a {
      float: left;
      margin-left: 0;
      margin-right: 16px;
    }
  }
}

/*
 * Short mode (currently not used)
 */

.markdown-body.-literate .up-next,
.markdown-body .up-next {
  &.-short {
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 1.5em;
  }

  &.-short::before {
    display: none;
  }
}
