@import "variables";
@import "mixins";

$pagination-ff: $font-family !default;
$pagination-fw: $fw-regular !default;
$pagination-fs: 2rem !default;
$pagination-color: $col-sec-d !default;
$pagination-color-hover: $col-prm !default;

$pagintation-next-icon: url(theme-url("/assets/icons/pagination-icon-next.svg")) !default;
$pagintation-prev-icon: url(theme-url("/assets/icons/pagination-icon-prev.svg")) !default;

nav#pagination {
  ul.page-numbers {
    max-width: max-content;
    display: flex;
    margin: 0;
    list-style: none;
    column-gap: 1.5rem;
    * {
      font-family: $pagination-ff;
      font-weight: $pagination-fw;
      color: $pagination-color;
      font-size: $pagination-fs;
      line-height: 1;
    }
    .next {
      &::after {
        content: $pagintation-next-icon;
        display: flex;
        padding-top: 3px;
        transform: scale(0.8);
        transition: $trans-h;
      }
      &:hover {
        &:after {
          transition: $trans-h;
          transform: translateX(3px) scale(0.8);
        }
      }
    }
    .prev {
      &::before {
        content: $pagintation-prev-icon;
        display: flex;
        padding-top: 3px;
        transform: scale(0.8);
        transition: $trans-h;
      }
      &:hover {
        &:before {
          transform: translateX(-3px) scale(0.8);
          transition: $trans-h;
        }
      }
    }

    & > li {
      display: flex;
      align-items: center;
      & > * {
        &:hover {
          text-decoration: none;
        }
        &.current {
          color: $pagination-color-hover;
        }
        &:not(.current) {
          &:hover {
            color: $pagination-color-hover;
          }
        }
      }
      &.dots:hover {
        background: none;
      }
      &.current:hover {
        background: $col-prm;
      }
    }
  }
}
