/**
 * Pagination Component
 * Modern pagination with prev/next buttons and page numbers
 */

/********************
  Part - Main container
********************/
.pagination {
  display         : flex;
  justify-content : center;
  padding         : 2rem 0;
  margin-top      : 1.5rem;
}

.pagination__container {
  display     : flex;
  align-items : center;
  gap         : 0.5rem;
}

/********************
  Part - Page list
********************/
.pagination__list {
  display     : flex;
  align-items : center;
  gap         : 0.25rem;
  list-style  : none;
  padding     : 0;
  margin      : 0;
}

.pagination__item {
  display : flex;
}

/********************
  Part - Links/buttons
********************/
.pagination__link {
  display         : flex;
  align-items     : center;
  justify-content : center;
  min-width       : 40px;
  height          : 40px;
  padding         : 0 0.75rem;
  font-size       : 0.875rem;
  font-weight     : 500;
  color           : var(--color-black-default, #091C34);
  background      : var(--color-white-default, #fff);
  border          : 1px solid hsl(210, 20%, 90%);
  border-radius   : var(--radius-sm, 5px);
  text-decoration : none;
  transition      : all 0.2s ease;
  cursor          : pointer;
}

.pagination__link:hover:not(.pagination__link--disabled) {
  border-color    : var(--color-primary, hsl(210, 90%, 45%));
  color           : var(--color-primary, hsl(210, 90%, 45%));
  text-decoration : none;
}

.pagination__link:focus-visible {
  outline        : 2px solid var(--color-primary, hsl(210, 90%, 45%));
  outline-offset : 2px;
}

/********************
  Part - Current page
********************/
.pagination__item--current .pagination__link {
  background   : var(--color-primary, hsl(210, 90%, 45%));
  border-color : var(--color-primary, hsl(210, 90%, 45%));
  color        : var(--color-white-default, #fff);
}

.pagination__item--current .pagination__link:hover {
  background   : var(--color-primary, hsl(210, 90%, 45%));
  border-color : var(--color-primary, hsl(210, 90%, 45%));
  color        : var(--color-white-default, #fff);
}

/********************
  Part - Previous/Next
********************/
.pagination__link--previous,
.pagination__link--next {
  gap : 0.375rem;
}

.pagination__link--previous svg,
.pagination__link--next svg {
  width      : 16px;
  height     : 16px;
  flex-shrink: 0;
}

/********************
  Part - Disabled state
********************/
.pagination__link--disabled {
  color          : var(--color-grey-font-default, #516765);
  opacity        : 0.5;
  cursor         : not-allowed;
  pointer-events : none;
}

/********************
  Part - Spacer
********************/
.pagination__spacer {
  display         : flex;
  align-items     : center;
  justify-content : center;
  min-width       : 40px;
  height          : 40px;
  font-size       : 0.875rem;
  color           : var(--color-grey-font-default, #516765);
}

/********************
  Part - Responsive
********************/
@media (max-width: 575px) {
  .pagination__link-text {
    display : none;
  }

  .pagination__link--previous,
  .pagination__link--next {
    min-width : 40px;
    padding   : 0;
  }

  .pagination__link {
    min-width : 36px;
    height    : 36px;
    padding   : 0 0.5rem;
    font-size : 0.8125rem;
  }
}

@media (max-width: 374px) {
  .pagination__list {
    gap : 0.125rem;
  }

  .pagination__link {
    min-width : 32px;
    height    : 32px;
    font-size : 0.75rem;
  }
}