/* Pagination
-----------------*/
.c-pager-archive {
  margin-top: 100px;
  display: flex;
  justify-content: center;

  .pagination {
    .screen-reader-text {
      display: none;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 10px;

      .page-numbers {
        display: inline-flex;
        width: 40px;
        height: 40px;
        box-sizing: border-box;
        border: 1px solid var(--color-primary-01);
        background-color: #fff;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        font-size: 1.6rem;
        font-family: var(--font-ff-outfit);
        color: var(--color-primary-01);
        text-decoration: none;

        &:hover {
          background-color: var(--color-border-01);
        }
      }

      .page-numbers.current {
        background-color: var(--color-primary-01);
        color: #fff;
      }

      .page-numbers.prev,
      .page-numbers.next {
        .c-pager-archive__prev-next {
          background-image: url('../../../img/common/icon/arrow_right_blue_02.svg');
          background-position: center;
          background-repeat: no-repeat;
          background-size: 17px 17px;
          color: transparent;
          display: inline-block;
        }
      }

      .page-numbers.prev {
        .c-pager-archive__prev-next {
          transform: rotate(180deg);
        }
      }

      .page-numbers.dots {
        border-color: transparent;
        transform: translateY(-4px);
        width: auto;
      }
    }
  }
}

.c-pager-prev-next {
  display: flex;
  justify-content: center;
  margin-top: 50px;

  .c-pager-prev-next-block {
    min-width: 150px;

    .c-pager-prev-next-link {
      display: flex;
      align-items: center;
      text-decoration: none;
      gap: 10px;

      .c-pager-prev-next-link__arrow {
        display: inline-flex;
        width: 40px;
        height: 40px;
        box-sizing: border-box;
        border: 1px solid var(--color-primary-01);
        background-color: #fff;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        font-size: 1.6rem;
        font-family: var(--font-ff-outfit);
        color: var(--color-primary-01);

        &:hover {
          background-color: var(--color-border-01);
        }
      }

      .c-pager-prev-next-link-arrow {
        .c-pager-prev-next-link-arrow__image {
          width: 17px;
          height: 17px;
        }
      }

      .c-pager-prev-next-link__text {
        font-size: 1.6rem;
        text-decoration: underline;
        color: var(--color-text);
      }

      &:hover {
        .c-pager-prev-next-link__arrow {
          background-color: var(--color-border-01);
        }

        .c-pager-prev-next-link__text {
          color: #ccc;
        }
      }
    }

    &:first-child {
      .c-pager-prev-next-link {
        .c-pager-prev-next-link-arrow {
          .c-pager-prev-next-link-arrow__image {
            transform: rotate(180deg);
          }
        }
      }
    }
  }

  .c-pager-prev-next__block.c-pager-prev-next__block--prev {
    display: flex;
    justify-content: flex-end;

    .c-pager-prev-next__link {
      .c-pager-prev-next__arrow {
        &::before {
          transform: rotate(135deg);
        }
      }
    }
  }

  .c-pager-prev-next__block.c-pager-prev-next__block--next {
    .c-pager-prev-next__link {
      .c-pager-prev-next__arrow {
        &::before {
          transform: rotate(-45deg);
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .c-pager-archive {
    .pagination {
      .nav-links {
        .page-numbers {
        }
  
        .page-numbers.current {
        }
  
        .page-numbers.prev,
        .page-numbers.next {
          .c-pager-archive__prev-next {
          }
        }
  
        .page-numbers.prev {
          .c-pager-archive__prev-next {
          }
        }
  
        .page-numbers.dots {
        }
      }
    }
  }

  .c-pager-prev-next {
    margin: 100px 30px 0 30px;
    justify-content: space-between;
  
    .c-pager-prev-next-block {
      min-width: initial;
  
      .c-pager-prev-next-link {
        .c-pager-prev-next-link__arrow {
        }
  
        .c-pager-prev-next-link-arrow {
          .c-pager-prev-next-link-arrow__image {
          }
        }
  
        .c-pager-prev-next-link__text {
        }
      }
  
      &:first-child {
        .c-pager-prev-next-link {
          .c-pager-prev-next-link-arrow {
            .c-pager-prev-next-link-arrow__image {
            }
          }
        }
      }
    }
  
    .c-pager-prev-next__block.c-pager-prev-next__block--prev {
      .c-pager-prev-next__link {
        .c-pager-prev-next__arrow {
          &::before {
          }
        }
      }
    }
  
    .c-pager-prev-next__block.c-pager-prev-next__block--next {
      .c-pager-prev-next__link {
        .c-pager-prev-next__arrow {
          &::before {
          }
        }
      }
    }
  }
}