/*------------------------------------------------------------
PAGINATION
====================================*/

/* Variables Custom */
$pagination-font-size: 1.2rem;
$pagination-font-weight: $font-weight-bold;

$pagination-box-font-size: 1.4rem;
$pagination-box-font-weight: $font-weight-normal;
$pagination-box-active-font-weight: $font-weight-bold;
$pagination-box-color: $black;
$pagination-box-width: 4rem;
$pagination-box-height: 4rem;
$pagination-box-prev-bg: $gray-400;
$pagination-box-prev-color: $primary;
/***************************************/


.pagination-box {
  .page-link {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: $pagination-padding-y 0.5rem;
    width: $pagination-box-width;
    height: $pagination-box-height;
    text-decoration: none;
    font-size: $pagination-box-font-size;
    font-weight: $pagination-box-font-weight;
    color: $pagination-box-color;
  }

  .page-item {
    &:first-child, &:last-child {
      .page-link {
        font-size: 16px;
        font-weight: $font-weight-bold;
        color: $pagination-box-prev-color;
        background: $pagination-box-prev-bg;
        border-color: $pagination-box-prev-bg;
      }
    }

    &.active {
      .page-link {
        font-weight: $pagination-box-active-font-weight;
      }
    }
    &.disabled {
      &:first-child, &:last-child {
        .page-link {
          color: $pagination-disabled-color;
          background: $pagination-disabled-bg;
          border-color: $pagination-disabled-border-color;
        }
      }
    }
  }
}

.pagination-link {
  .page-link {
    border: 0;
    text-decoration: none;
    font-size: $pagination-font-size;
    font-weight: $pagination-font-weight;

    svg {
      transition: 0.3s;
    }

    &:hover {
      background: $pagination-bg;
      svg {
        fill: $pagination-hover-color;
      }
    }
  }

  .page-item {
    &:first-child {
      svg {
        transform: rotate(-180deg);
      }
    }
    &.disabled {
      .page-link {
        color: $pagination-disabled-color;
        background: $pagination-bg;
      }
      svg {
        fill: $pagination-disabled-color;
      }
    }
  }
}

.pagination-btn {
  text-align: center;
  p {
    margin-bottom: 1rem;
    font-weight: $font-weight-medium;
  }
}
