@import "@doku-dev/doku-fragment/breakpoint";

// Container

.d-pagination-container {
  display: flex;
  justify-content: space-between;

  &.use-padding {
    padding: 16px;
  }

  @include mobile {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }
}

.d-pagination-section-left {
  display: flex;
  align-items: center;
}

.d-pagination-section-right {
  display: flex;
  align-items: center;

  @include desktop {
    .d-pagination {
      margin-left: 16px;
    }
  }
}

// Pagination Info

.d-pagination-info {
  color: var(--d-color-neutral-50);
  .hidden {
    display: none;
  }
  @include mobile {
    display: none;
  }
}

// Pagination Per Page

.d-pagination-per-page {
  width: 200px;
}

// Pagination

.d-pagination {
  display: flex;
  align-items: center;
}

.d-pagination-page-number,
.d-pagination-page-ellipsis,
.d-pagination-prev,
.d-pagination-next {
  max-height: 46px;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  user-select: none;
}

.d-pagination-page-number,
.d-pagination-page-ellipsis {
  padding: 10px;
  width: 40px;
}

.d-pagination-page-number {
  color: var(--d-color-neutral-100);
  font-family: var(--d-font-stacks);
  font-size: 16px;
  font-weight: 500;
  &:hover {
    background: var(--d-color-neutral-20);
    cursor: pointer;
  }
  &.active {
    background: var(--d-color-neutral-20);
    cursor: default;
  }
}

.d-pagination-prev,
.d-pagination-next {
  color: var(--d-color-neutral-50);
  &:not(.disabled):hover {
    background: var(--d-color-neutral-20);
    cursor: pointer;
  }
  &.disabled {
    color: var(--d-color-neutral-20);
  }
}