.chapter-links {
  margin: 0;

  @media (min-width: 769px) {
    margin: 2em 0;
  }
}

.chapter-link {
  border-top: solid 1px rgba($blue, .2);
  @include clearfix;

  > a,
  > span {
    display: block;
    padding: 8px 0;
  }

  > a:hover,
  > a:focus {
    text-decoration: none;

    > .title {
      color: $blue;
    }
  }

  > * > .title {
    font-weight: normal;
    font-size: 1em;
    @include ms-respond(font-size, 1);
    margin-right: .5em;
    color: $blacker;
  }

  > * > .soon,
  > * > .description {
    color: $gray;
    @include ms-respond(font-size, -1);
  }

  @media (max-width: 768px) {
    > * > .soon {
      white-space: nowrap;
    }

    > * > .soon::before {
      content: '-';
      margin: 0 .3em;
    }
  }

  @media (min-width: 769px) {
    > * > .soon {
      float: right;
      margin-top: .8em;
    }
  }

  > * > .soon {
    font-style: italic;
    font-family: $serif;
    @include ms-respond(font-size, -2);
  }

  &:last-child {
    border-bottom: solid 1px rgba($blue, .2);
  }
}

.chapter-link.-unavailable {
  > * > .title {
    color: $gray;
  }

  > * > .soon,
  > * > .description {
    opacity: .5;
  }
}
