// ===========================================
// Navigation ナビゲーション
// ===========================================

/* pagination ページナビ
--------------------------------- */
.com-pagination {
  ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: -8px;
    margin-top: -8px;
    .page-numbers {
      display: block;
      margin-left: 8px;
      margin-top: 8px;
      box-sizing: border-box;
      &:not(.prev):not(.next) {
        display: grid;
        border: 1px solid #c0c0c0;
        width: 64px;
        height: 64px;
        place-items: center;
      }
      &.prev,
      &.next {
        padding: 1em;
        &:hover {
          color: map-get($colors, main);
        }
      }
      &.current {
        border-width: 2px !important;
        border-color: map-get($colors, main) !important;
      }
    }
    a:not(.prev):not(.next) {
      &:hover {
        background: color.adjust(map-get($colors, main), $lightness: 40%);
      }
    }
    // 矢印アイコン
    .arrow-left,
    .arrow-right {
      display: block;
      width: 8px;
      height: 8px;
      border-top: 2px solid currentColor;
      border-right: 2px solid currentColor;
    }

    .arrow-left {
      transform: rotate(-135deg);
    }

    .arrow-right {
      transform: rotate(45deg);
    }
  }
}

/* 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);
      }
    }
  }
}