@use "pix-design-tokens/breakpoints";

.pix-pagination,
.pix-pagination-condensed {
  display: flex;
  justify-content: center;
  color: var(--pix-neutral-800);
  font-size: 0.875rem;

  &__size {
    display: none;
    align-items: center;
    padding: 0;

    .pagination-size__label {
      margin-right: var(--pix-spacing-4x);
    }

    select.pagination__choice {
      height: 36px;
      padding-right: var(--pix-spacing-6x);
      padding-left: var(--pix-spacing-2x);
      font-size: 0.8rem;
    }
  }

  &__navigation {
    display: flex;
    flex-direction: column;
    gap: var(--pix-spacing-3x);
    align-items: center;
    padding: 0;
  }
}

.pix-pagination-navigation {
  &__action {
    display: flex;
    align-items: center;

    &-button {
      margin: 0 var(--pix-spacing-2x);
    }
  }
}

@include breakpoints.device-is('tablet') {
  .pix-pagination {
    gap:var(--pix-spacing-2x);
    justify-content: space-between;
  }

  .pix-pagination > .pix-pagination {
    &__size {
      display: flex;
    }

    &__navigation {
      flex-direction: initial;
      gap: initial;
    }
  }
}