various-ui/styles/pagination.css

This is a test version of the Vue 3 component library

.ui-pagination{--uioption-pagination-color:var(--uioption-font-color);--uioption-pagination-radius:var(--uisize-radius);--uioption-pagination-background-color:var(--uicolor-font-5);--uioption-pagination-active-color:var(--uicolor-font-6);--uioption-pagination-active-background-color:var(--uicolor-main-color);--uioption-pagination-disabled-color:var(--uioption-font-color);--uioption-pagination-disabled-background-color:var(--uicolor-font-4-05)}.ui-pagination{width:100%;display:flex;align-items:center;justify-content:space-between}.ui-pagination .ui-pagination-controls{display:flex;-webkit-user-select:none;user-select:none;align-items:center}.ui-pagination .ui-pagination-controls .ui-pagination-control{width:40px;color:var(--uioption-pagination-color);height:40px;margin:0 4px;cursor:pointer;display:flex;padding:0 2px;position:relative;align-items:center;border-radius:var(--uioption-pagination-radius);justify-content:center;background-color:var(--uioption-pagination-background-color)}.ui-pagination .ui-pagination-controls .ui-pagination-control.ui-active,.ui-pagination .ui-pagination-controls .ui-pagination-control:hover{color:var(--uioption-pagination-active-color);background-color:var(--uioption-pagination-active-background-color)}.ui-pagination .ui-pagination-controls .ui-pagination-control.ui-disabled-status{color:var(--uioption-pagination-disabled-color);cursor:auto;background-color:var(--uioption-pagination-disabled-background-color)}.ui-pagination .ui-pagination-controls .ui-pagination-control.ui-next .ui-icon{transform:rotate(90deg)}.ui-pagination .ui-pagination-controls .ui-pagination-control.ui-back .ui-icon{transform:rotate(-90deg)}