// ===========================================
// single 記事詳細
// ===========================================
/* post navigation 記事前後ボタン
--------------------------------- */
.single-nav {
  border-top: 1px solid #d1d1d1;
  margin-top: 40px;
  padding-top: 40px;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 20px;
  @include mq-up(s) {
    grid-template-columns: 3fr 3fr 2fr;
    margin-top: 60px;
    padding-top: 60px;
  }
  a {
    display: block;
    text-align: center;
    padding: 0.5em;
    border: 2px solid map-get($colors, main);
    color: map-get($colors, main);
    position: relative;
    &::before {
      content: '';
      width: 8px;
      height: 8px;
      border-top: 2px solid currentColor;
      border-right: 2px solid currentColor;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
    }

    &[rel='prev'] {
      &::before {
        left: 0.8em;
        transform: rotate(-135deg);
      }
    }
    &[rel='next'] {
      &::before {
        right: 0.8em;
        transform: rotate(45deg);
      }
    }
    &.index {
      background: color.adjust(map-get($colors, text), $lightness: 20%);
      border-color: color.adjust(map-get($colors, text), $lightness: 20%);
      color: #fff;
      padding-right: 2em;
      &::before {
        right: 0.8em;
        transform: rotate(-45deg);
      }
    }
  }
}