ul.pagination {
    display: inline-flex;
    flex-flow: row nowrap;
    justify-content: center;
  }
  
  ul.pagination--vertical {
    flex-flow: column nowrap;
  }
  
  ul.pagination > li {
    margin: 0 5px;
  }
  
  ul.pagination--vertical > li {
    margin: 8px 0;
    position: relative;
  }
  
  ul.pagination button {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    margin: 0;
    box-shadow: none;
    border-radius: 0;
    background: var(--base-color-white);
    border: 0;
    --size: 10px;
    width: var(--size);
    height: var(--size);
    transition: 1000ms var(--ttf-2);
    transition-property: border-radius, transform;
    position: relative;
    display: block;
  }
  
  ul.pagination button::before {
    content: '';
    display: block;
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 50%;
  }
  
  ul.pagination button span {
    position: absolute;
    width: calc(var(--size) * 0.6);
    height: calc(var(--size) * 0.6);
    display: block;
    background: var(--base-color-black);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    opacity: 0;
    transition: 1000ms var(--ttf-2);
    transition-property: opacity;
  }
  
  ul.pagination > li.current button {
    pointer-events: none;
    cursor: default;
  }
  
  ul.pagination > li button:hover,
  ul.pagination > li.current button {
    border-radius: 50%;
    transform: rotate(360deg);
  } 
  
  ul.pagination > li button:hover span,
  ul.pagination > li.current button span {
    opacity: 1;
  }
  
  ul.pagination--vertical button + div {
    position: absolute;
    left: 32px;
    top: 50%;
    transform: translateY(-50%) translateX(-5px);
    white-space: nowrap;
    font-size: 14px;
    background: rgba(255,255,255,0.8);
    border-radius: 3px;
    color: var(--base-color-black);
    padding: 5px 10px;
    opacity: 0;
    pointer-events: none;
    transition: 500ms var(--ttf-7);
    transition-property: transform, opacity;
  }
  
  ul.pagination--vertical button + div::before {
  	right: 100%;
  	top: 50%;
  	border: solid transparent;
  	content: "";
  	height: 0;
  	width: 0;
  	position: absolute;
  	pointer-events: none;
  	border-color: rgba(255, 255, 255, 0);
  	border-right-color: rgba(255, 255, 255, 0.8);
  	border-width: 6px;
  	margin-top: -6px;
  }
  
  @media (hover: hover) {
    ul.pagination--vertical button:hover + div {
      opacity: 1;
      transform: translateY(-50%);
    }
  }
  
  
  
  
  .row-pagination {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
  }
  
  .row-pagination.mobile {
    display: none;
  }
  
  @media (max-width: 750px) {
    .row-pagination.desktop {
      display: none;
    }
    .row-pagination.mobile {
      display: flex;
    }
  }
  
  
  
  
  
  
  
  .row-pagination :is(.btn-pagination-prev, .btn-pagination-next) {
    margin-inline: 1em;
  }  
  
  .row-pagination :is(.btn-pagination-prev, .btn-pagination-next) span {
    display: block;
    line-height: 0;
  }