/* 文章页 */
/* 通过SVG箭头的动画效果 */
.post-prevnext {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: .9rem;
  margin-left: -.35rem;
  margin-right: -.35rem;
}

.post-prev,
.post-next {
  display: flex;
  padding-left: 0;
  padding-right: 0;
}

.post-prev i,
.post-next i {
  font-size: 1.5rem;
}

.post-prev a,
.post-next a {
  display: flex;
  align-items: center;
}

.hidden-mobile {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
}

@media (max-width: 575px) {
  .hidden-mobile {
    display: none;
  }
}

.post-prev:hover i,
.post-prev:active i,
.post-next:hover i,
.post-next:active i {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-delay: .1s;
  animation-delay: .1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

.post-prev:hover i,
.post-prev:active i {
  -webkit-animation-name: post-prev-anim;
  animation-name: post-prev-anim;
}

.post-next:hover i,
.post-next:active i {
  -webkit-animation-name: post-next-anim;
  animation-name: post-next-anim;
}

.post-next {
  justify-content: flex-end;
}

.fa-chevron-left {
  margin-right: .5rem;
}

.fa-chevron-right {
  margin-left: .5rem;
}

@keyframes post-prev-anim {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(-0.35rem);
    transform: translateX(-0.35rem);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes post-next-anim {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(0.35rem);
    transform: translateX(0.35rem);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}


/* 通过SVG箭头的动画效果 */
.post-prevnext {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: .9rem;
  margin-left: -.35rem;
  margin-right: -.35rem;
}

.post-prev,
.post-next {
  display: flex;
  padding-left: 0;
  padding-right: 0;
}

.post-prev svg,
.post-next svg {
  width: 1.5rem; /* 设置SVG的宽度 */
  height: 1.5rem; /* 设置SVG的高度 */
  transition: transform 1s ease-in-out;
}

/* 只有当鼠标悬浮时才触发动画 */
.post-prev:hover svg {
  animation: float-back-forward 1s ease-in-out infinite; /* 左箭头动画 */
}

.post-next:hover svg {
  animation: float-forward-back 1s ease-in-out infinite; /* 右箭头动画 */
}

/* 左箭头：向左浮动 */
@keyframes float-back-forward {
  0% {
    transform: translateX(0); /* 初始位置 */
  }
  50% {
    transform: translateX(-0.35rem); /* 向左浮动一点 */
  }
  100% {
    transform: translateX(0); /* 返回原位置 */
  }
}

/* 右箭头：向右浮动 */
@keyframes float-forward-back {
  0% {
    transform: translateX(0); /* 初始位置 */
  }
  50% {
    transform: translateX(0.35rem); /* 向右浮动一点 */
  }
  100% {
    transform: translateX(0); /* 返回原位置 */
  }
}

/* --------------------------------------------------------------------------------------------------- */