.pagination {
  width: auto;
  display: flex;
  justify-content: end;
  padding: 30px 0;
  align-items: center;

  img {
    width: 24px;
    height: 20px;
  }

  .pagination__list {

    display: flex;
    justify-content: row;

    > li {
      margin: 2px;
      transition: .2s all;

      &:hover {
        transform: scale(0.9);
      }

      &.active {
        transform: scale(0.9);

        a {
          background-color: var(--item-white-bg);
          font-weight: 700;
        }
      }

      a {
        background-color: var(--item-white-bg);
        padding: 9px 15px;
        border: none;
        border-radius: 7px;
        font-size: 20px;
        color: #f2f2f2;
      }
    }
  }

  .pagination__button {
    background-color: var(--item-white-bg);
    border: none;
    border-radius: 7px;
    font-size: 20px;
    margin: 2px;
    padding: 5px 8px;
    color: var(--pColor);
  }

  &--move-prev {
    animation: pagination-move-prev 0.5s ease both;
  }
  &--move-next {
    animation: pagination-move-next 0.5s ease both;
  }
  &--move-top {
    animation: pagination-move-top 0.5s ease both;
  }
}

@keyframes pagination-move-prev {
  from,
  0% {
    transform: translateX(25px);
  }

  50% {
    transform: translateX(-5px);
  }

  to,
  100% {
    transform: translateX(0px);
  }
}
@keyframes pagination-move-next {
  from,
  0% {
    transform: translateX(-25px);
  }

  50% {
    transform: translateX(5px);
  }

  to,
  100% {
    transform: translateX(0px);
  }
}
@keyframes pagination-move-top {
  from,
  0% {
    transform: translateY(-25px);
  }

  50% {
    transform: translateY(10px);
  }

  to,
  100% {
    transform: translateY(0px);
  }
}