.shared-pagination{

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  margin-top:
    14px;

}


.shared-pagination-left{

  display:
    flex;

  align-items:
    center;

  gap:
    18px;

  flex-wrap:
    wrap;

}


.shared-pagination-page-size{

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  color:
    #374151;

  font-size:
    13px;

  white-space:
    nowrap;

}


.shared-pagination-page-size-select{

  min-width:
    58px;

  height:
    34px;

  padding:
    4px 8px;

  border:
    1px solid #d1d5db;

  border-radius:
    6px;

  background:
    #ffffff;

  color:
    #111827;

  cursor:
    pointer;

}


.shared-pagination-summary{

  min-width:
    180px;

  color:
    #6b7280;

  font-size:
    12px;

}


.shared-pagination-summary strong{

  color:
    #374151;

  font-weight:
    700;

}


.shared-pagination-controls{

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    10px;

  margin-left:
    auto;

}


.shared-pagination-button{

  min-width:
    82px;

  min-height:
    34px;

  padding:
    7px 12px;

  border:
    1px solid #d1d5db;

  border-radius:
    8px;

  background:
    #ffffff;

  color:
    #374151;

  font-size:
    12px;

  font-weight:
    600;

  cursor:
    pointer;

  transition:
    border-color .2s ease,
    color .2s ease,
    background .2s ease;

}


.shared-pagination-button:hover:not(:disabled){

  border-color:
    #16a34a;

  background:
    #f0fdf4;

  color:
    #15803d;

}


.shared-pagination-button:disabled{

  opacity:
    .45;

  cursor:
    not-allowed;

}


.shared-pagination-page-info{

  min-width:
    92px;

  color:
    #6b7280;

  font-size:
    12px;

  text-align:
    center;

  white-space:
    nowrap;

}


.shared-pagination-page-info strong{

  color:
    #111827;

  font-weight:
    700;

}


@media (max-width: 640px){

  .shared-pagination{

    flex-direction:
      column;

    align-items:
      stretch;

  }


  .shared-pagination-left{

    justify-content:
      center;

  }


  .shared-pagination-summary{

    min-width:
      0;

    text-align:
      center;

  }


  .shared-pagination-controls{

    width:
      100%;

    margin-left:
      0;

    justify-content:
      space-between;

  }


  .shared-pagination-page-info{

    min-width:
      0;

  }

}