@use "sass:map";
@use "global/acms-common" as acms;
@use "global/common" as global;

/* ------------------------------
　　ページャー
------------------------------ */
.pager {
  --pager-button-size: 2.5rem;
  --pager-button-border-width: var(--border-width-sm);
  --pager-button-border-style: solid;
  --pager-button-border-radius: var(--border-radius-md);
}

.pager-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  padding-left: 0;
  margin-block: 3rem 0;
  list-style: none;

  li {
    display: inline-block;
    font-size: map.get(global.$font-scales, body-l);
    font-weight: bold;
    color: var(--color-text);

    &.cur span,
    &.forward-link span,
    &.back-link span {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }

    &.cur {
      /* 現在いる位置 */
      box-sizing: border-box;
      width: var(--pager-button-size);
      height: var(--pager-button-size);
      color: var(--color-white);
      background-color: var(--color-primary);
      border: var(--pager-button-border-width) var(--pager-button-border-style) var(--color-primary);
      border-radius: var(--pager-button-border-radius);
    }

    &.ellipsis {
      display: inline-flex;
      align-items: flex-end;
      justify-content: center;
      padding-block: 0.25rem;
      color: var(--color-gray70);
    }

    &.forward-link,
    &.back-link {
      line-height: 1;
    }

    svg {
      color: inherit;

      path {
        stroke: currentcolor;
      }
    }
  }
}

.pager-link {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--pager-button-size);
  height: var(--pager-button-size);
  padding: 0.25rem;
  text-decoration: none;
  background-color: var(--color-white);
  border: var(--pager-button-border-width) var(--pager-button-border-style) var(--color-gray30);
  border-radius: var(--pager-button-border-radius);

  &,
  &:link,
  &:visited {
    color: inherit;
  }

  @media (hover: hover) {
    &:any-link {
      transition: background-color 0.3s ease;
    }

    &:any-link:hover {
      background-color: var(--color-hover-bg);
    }
  }
}

/* シンプルページャー と 前後リンク の、
/* 丸矢印アイコン付きページ案内テキスト
----------------------------- */
.pager-simple-arrow,
.serial-nav-arrow {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  padding-block: 0.5rem;
}

.pager-simple-arrow-text,
.serial-nav-arrow-text {
  font-size: map.get(global.$font-scales, body-m);
  font-weight: bold;
  line-height: var(--line-height-base);
  color: var(--color-text);
}

.pager-simple-arrow-icon,
.serial-nav-arrow-icon {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: auto;
  aspect-ratio: 1 / 1;
  background-color: var(--color-icon-bg);
  border-radius: 50%;

  svg {
    width: 0.625rem;
    height: 0.625rem;
    color: var(--color-white);
    object-fit: contain;

    path {
      stroke: currentcolor;
    }
  }

  @media (hover: hover) {
    a:any-link & {
      transition: background-color 0.3s ease;
    }

    a:any-link:hover & {
      background-color: var(--color-icon-bg-hover);
    }
  }
}

/* シンプルページャー
----------------------------- */
.pager-simple {
  margin-block: 3rem 0;
}

.pager-simple-list {
  display: grid;
  grid-template:
    "prev" auto
    "next" auto
   / auto;
  gap: 1rem 2rem;
  padding: 0;
  margin: 0;
  list-style: none;

  @include acms.media-breakpoint-up(md) {
    grid-template:
      "prev ... next" auto
     / minmax(0, 400px) auto minmax(0, 400px);
  }
}

.pager-simple-link {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  padding: 1rem;
  text-decoration: none;
  border: var(--border-width-sm) solid var(--color-gray30);
  border-radius: var(--border-radius-lg);

  &,
  &:link,
  &:visited {
    color: inherit;
  }

  @media (hover: hover) {
    transition: background-color 0.3s ease;

    &:any-link:hover {
      background-color: var(--color-hover-bg-2nd);
    }
  }
}

.pager-simple-item-prev {
  grid-area: prev;

  .pager-simple-link {
    align-items: flex-start;
  }
}

.pager-simple-item-next {
  grid-area: next;

  .pager-simple-link {
    align-items: flex-end;
  }
}



/* 前後リンク
----------------------------- */
.serial-nav {
  margin-block-start: 3rem;

  @include acms.media-breakpoint-up(md) {
    margin-block-start: 4rem;
  }
}

.serial-nav-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0;
  margin: 0;
  list-style: none;

  @include acms.media-breakpoint-up(md) {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem 2rem;
  }
}

.serial-nav-item-prev,
.serial-nav-item-next {
  min-width: 0;

  a {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    padding: 0.75rem 1rem 1rem;
    text-decoration: none;
    border: var(--border-width-sm) solid var(--color-gray30);
    border-radius: var(--border-radius-lg);

    &,
    &:link,
    &:visited {
      color: inherit;
    }

    @media (hover: hover) {
      transition: background-color 0.3s ease;

      &:any-link:hover {
        background-color: var(--color-hover-bg-2nd);
      }
    }
  }
}

.serial-nav-item-prev {
  a {
    align-items: flex-start;
  }
}

.serial-nav-item-next {
  text-align: right;

  a {
    align-items: flex-end;
  }

  @include acms.media-breakpoint-up(md) {
    grid-column-start: 3;
  }
}

/* 前の記事・次の記事 の エントリータイトル */
.serial-nav-item-title {
  display: inline-block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: var(--line-height-base);
  color: var(--color-text);
  white-space: nowrap;
}

/* 一覧へ戻る */
.serial-nav-item-index {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  font-size: map.get(global.$font-scales, body-m);
  font-weight: bold;
  line-height: var(--line-height-base);

  a {
    position: relative;
    display: inline-block;
    padding-block: 0.5rem;
    text-decoration: none;

    &,
    &:link,
    &:visited {
      color: inherit;
    }

    &::after {
      position: absolute;
      inset: 0 -0.5rem;
      z-index: 1;
      content: "";
      background-color: transparent;
      border-radius: var(--border-radius-md);

      @media (hover: hover) {
        transition: background-color 0.3s ease;
      }
    }

    @media (hover: hover) {
      &:hover {
        &::after {
          background-color: var(--color-hover-bg-2nd);
        }
      }
    }
  }

  @include acms.media-breakpoint-up(md) {
    grid-column-start: 2;
  }
}
