@turquoisehealth/pit-viper 2.40.0 → 2.41.0

package/_site/assets/css/pit-viper-v2-scoped.css

@@ -1,11 +1,7 @@
 @charset "UTF-8";
 /* toggle color styles should align with secondary and tertiary buttons */
-@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900");
-:root {
-  --select-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='16' viewBox='0 0 17 16' fill='none'%3E%3Cpath d='M4.16663 6L8.16663 10L12.1666 6' stroke='%2389989B' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-}
-
 /* toggle color styles should align with secondary and tertiary buttons */
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900");
 .pv-v2 {
   font-family: var(--font-family-body, Inter, sans-serif);
   font-weight: 400;
@@ -944,7 +940,7 @@
   padding-inline-end: 2rem;
   background-repeat: no-repeat;
   background-size: 1rem 1rem;
-  background-position: top 50% right 0.5rem;
+  background-position: right 0.5rem center;
   text-align: unset;
 }
 .pv-v2 .pv-select:not(:disabled, [data-invalid]):focus-visible, .pv-v2 .pv-select:not(:disabled, [data-invalid]):hover,
@@ -959,10 +955,10 @@
   opacity: 1;
 }
 .pv-v2 .pv-select {
-  background-image: var(--select-background-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2302363D' d='m7.1 9.9 4.3 5.1c.1.1.2.1.3.2.1 0 .2.1.3.1s.2 0 .3-.1c.1 0 .2-.1.3-.2L17 9.9c.4-.5.1-1.2-.6-1.2H7.6c-.6 0-1 .8-.5 1.2z'/%3E%3C/svg%3E"));
+  background-image: var(--select-background-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.151 8.151a1.2 1.2 0 0 1 1.698 0L12 13.303l5.151-5.152A1.2 1.2 0 1 1 18.85 9.85l-6 6a1.2 1.2 0 0 1-1.697 0l-6-6a1.2 1.2 0 0 1 0-1.698Z' fill='%234B595C'/%3E%3C/svg%3E"));
 }
 .pv-v2 .pv-select-multiple {
-  background-image: var(--select-multiple-closed-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.151 8.151a1.2 1.2 0 0 1 1.698 0L12 13.303l5.151-5.152A1.2 1.2 0 1 1 18.85 9.85l-6 6a1.2 1.2 0 0 1-1.697 0l-6-6a1.2 1.2 0 0 1 0-1.698Z' fill='%2302363D'/%3E%3C/svg%3E"));
+  background-image: var(--select-multiple-closed-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.151 8.151a1.2 1.2 0 0 1 1.698 0L12 13.303l5.151-5.152A1.2 1.2 0 1 1 18.85 9.85l-6 6a1.2 1.2 0 0 1-1.697 0l-6-6a1.2 1.2 0 0 1 0-1.698Z' fill='%234B595C'/%3E%3C/svg%3E"));
 }
 .pv-v2 .pv-textarea {
   --resize: vertical;
@@ -2417,6 +2413,7 @@
   font-size: 0.6875rem;
   line-height: 14px;
   padding: 0 0.5rem;
+  border-radius: 2px;
 }
 .pv-v2 .pv-tag-lg {
   font-size: 0.6875rem;
@@ -2447,10 +2444,11 @@
 .pv-v2 .pv-tag-inverse {
   background-color: #02363D;
 }
-.pv-v2 .pv-tag-red {
-  background-color: #FFF1F1;
+.pv-v2 .pv-tag-red,
+.pv-v2 .pv-tag-error {
+  background-color: #FFEFEB;
   border-color: transparent;
-  color: #A2191F;
+  color: #FF471A;
 }
 .pv-v2 .pv-tag-red-inverse {
   background-color: #DA1E28;
@@ -2464,18 +2462,20 @@
   background-color: #EAB333;
   color: #121313;
 }
-.pv-v2 .pv-tag-green {
-  background-color: #DEFBE6;
+.pv-v2 .pv-tag-green,
+.pv-v2 .pv-tag-success {
+  background-color: #E8FDEA;
   border-color: transparent;
-  color: #0E6027;
+  color: #0E8019;
 }
 .pv-v2 .pv-tag-green-inverse {
   background-color: #198038;
 }
-.pv-v2 .pv-tag-orange {
-  background-color: #FAEAE4;
+.pv-v2 .pv-tag-orange,
+.pv-v2 .pv-tag-warning {
+  background-color: #FFEED9;
   border-color: transparent;
-  color: #BA4E01;
+  color: #B26500;
 }
 .pv-v2 .pv-tag-orange-inverse {
   background-color: #BA4E01;
@@ -2497,6 +2497,10 @@
   background-color: #16696D;
   color: #FFFFFF;
 }
+.pv-v2 .pv-tag-highlight {
+  background-color: #E4F8F6;
+  color: #16696D;
+}
 .pv-v2 button.pv-tag-primary:hover, .pv-v2 button.pv-tag-primary:focus-visible {
   background-color: #0D5256;
 }
@@ -2746,7 +2750,7 @@
   font-weight: 600;
 }
 .pv-v2 .pv-select-multiple[data-dropdown] {
-  background-image: var(--select-multiple-open-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.151 15.848a1.2 1.2 0 0 0 1.698 0L12 10.698l5.151 5.15a1.2 1.2 0 1 0 1.698-1.697l-6-6a1.2 1.2 0 0 0-1.697 0l-6 6a1.2 1.2 0 0 0 0 1.697Z' fill='%23176f6f'/%3E%3C/svg%3E"));
+  background-image: var(--select-multiple-open-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.151 15.848a1.2 1.2 0 0 0 1.698 0L12 10.698l5.151 5.15a1.2 1.2 0 1 0 1.698-1.697l-6-6a1.2 1.2 0 0 0-1.697 0l-6 6a1.2 1.2 0 0 0 0 1.697Z' fill='%234B595C'/%3E%3C/svg%3E"));
   background-color: #ECECEC;
 }
 .pv-v2 .pv-select-multiple[data-dropdown],
@@ -2761,11 +2765,11 @@
   border-radius: 4px;
 }
 .pv-v2 .pv-dropdown > [class*=pv-button] {
-  padding-inline-end: 40px;
+  padding-inline-end: 2rem;
   background-image: var(--dropdown-closed-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.151 8.151a1.2 1.2 0 0 1 1.698 0L12 13.303l5.151-5.152A1.2 1.2 0 1 1 18.85 9.85l-6 6a1.2 1.2 0 0 1-1.697 0l-6-6a1.2 1.2 0 0 1 0-1.698Z' fill='%23FFFFFF'/%3E%3C/svg%3E"));
   background-repeat: no-repeat;
-  background-size: 1.25rem 1.25rem;
-  background-position: right 1rem center;
+  background-size: 1rem 1rem;
+  background-position: right 0.5rem center;
 }
 .pv-v2 .pv-dropdown > [class*=pv-button][data-dropdown] {
   background-image: var(--dropdown-open-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.151 15.848a1.2 1.2 0 0 0 1.698 0L12 10.698l5.151 5.15a1.2 1.2 0 1 0 1.698-1.697l-6-6a1.2 1.2 0 0 0-1.697 0l-6 6a1.2 1.2 0 0 0 0 1.697Z' fill='%23FFFFFF'/%3E%3C/svg%3E"));
@@ -2796,77 +2800,59 @@
   background-image: none;
 }
 .pv-v2 .pv-pagination {
-  display: flex;
-  justify-content: center;
+  border-radius: var(--pagination-radius, 0);
+  border: var(--pagination-border, 0);
 }
-.pv-v2 .pv-pagination > button,
-.pv-v2 .pv-pagination > a {
-  font-size: 1.5rem;
-  line-height: 1;
-  background-color: transparent;
-  transition-duration: 0.125s;
-  transition-property: background-color, color;
-}
-.pv-v2 .pv-pagination > button:first-of-type,
-.pv-v2 .pv-pagination > a:first-of-type {
-  border-radius: 2rem 0 0 2rem;
-}
-.pv-v2 .pv-pagination > button:last-of-type,
-.pv-v2 .pv-pagination > a:last-of-type {
-  border-radius: 0 2rem 2rem 0;
-}
-.pv-v2 .pv-pagination > button:disabled, .pv-v2 .pv-pagination > button:not([href]):not(button),
-.pv-v2 .pv-pagination > a:disabled,
-.pv-v2 .pv-pagination > a:not([href]):not(button) {
-  color: #ADB5C0;
-  background-color: #ECECEC;
-  user-select: none;
-  cursor: default;
-}
-.pv-v2 .pv-pagination > button:hover,
-.pv-v2 .pv-pagination > a:hover {
-  background-color: #ECECEC;
-  cursor: pointer;
-}
-.pv-v2 .pv-pagination [role=list] {
-  display: flex;
+.pv-v2 .pv-pagination, .pv-v2 .pv-pagination :is(ul, ol) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--pagination-gap, 0.25rem);
+  overflow: clip;
 }
-.pv-v2 .pv-pagination li {
+.pv-v2 .pv-pagination :where(button, a), .pv-v2 .pv-pagination :is(ul, ol) :where(button, a) {
   display: grid;
   place-items: center;
   user-select: none;
+  border: none;
+  text-decoration: none;
+  aspect-ratio: 1;
+  padding: 0;
+  color: var(--pagination-item-color, #4B595C);
+  font-size: var(--pagination-font-size, 0.75rem);
+  font-weight: var(--pagination-font-weight, 500);
+  line-height: var(--pagination-line-height, 1.33333333);
+  background-color: var(--pagination-background-color, transparent);
+  border-radius: var(--pagination-item-radius, 4px);
+  width: var(--pagination-item-width, 32px);
+}
+.pv-v2 .pv-pagination :where(button, a):not(:disabled), .pv-v2 .pv-pagination :is(ul, ol) :where(button, a):not(:disabled) {
+  cursor: pointer;
 }
-.pv-v2 .pv-pagination a {
-  display: block;
-  line-height: 38px;
-  transition-duration: 0.125s;
-  transition-property: background-color, color;
-  width: 40px;
+.pv-v2 .pv-pagination :where(button, a):not(:disabled):hover, .pv-v2 .pv-pagination :where(button, a):not(:disabled):focus-visible, .pv-v2 .pv-pagination :is(ul, ol) :where(button, a):not(:disabled):hover, .pv-v2 .pv-pagination :is(ul, ol) :where(button, a):not(:disabled):focus-visible {
+  background-color: var(--pagination-item-hover-background-color, #E8F2F4);
 }
-.pv-v2 .pv-pagination a[aria-current=page] {
-  background-color: #16696D;
-  color: #FFFFFF;
+.pv-v2 .pv-pagination :where(button, a):not(:disabled):active, .pv-v2 .pv-pagination :is(ul, ol) :where(button, a):not(:disabled):active {
+  background-color: var(--pagination-item-pressed-background-color, #C7D8DB);
 }
-.pv-v2 .pv-pagination a:hover, .pv-v2 .pv-pagination a:focus-visible {
-  text-decoration: none;
+.pv-v2 .pv-pagination :where(button, a):disabled, .pv-v2 .pv-pagination :is(ul, ol) :where(button, a):disabled {
+  color: var(--pagination-disabled-color, #7D898D);
+  background-color: var(--pagination-disabled-background-color, #ECECEC);
 }
-.pv-v2 .pv-pagination a:hover:not([aria-current=page]), .pv-v2 .pv-pagination a:focus-visible:not([aria-current=page]) {
-  background-color: #ECECEC;
+.pv-v2 .pv-pagination [aria-current=page] :is(button, a),
+.pv-v2 .pv-pagination [aria-current=page] :is(button, a):hover,
+.pv-v2 .pv-pagination [aria-current=page] :is(button, a):focus-visible, .pv-v2 .pv-pagination :is(ul, ol) [aria-current=page] :is(button, a),
+.pv-v2 .pv-pagination :is(ul, ol) [aria-current=page] :is(button, a):hover,
+.pv-v2 .pv-pagination :is(ul, ol) [aria-current=page] :is(button, a):focus-visible {
+  color: var(--pagination-item-active-color, #FFFFFF);
+  background-color: var(--pagination-item-active-background-color, #16696D);
 }
-.pv-v2 .pv-pagination > button,
-.pv-v2 .pv-pagination > a,
-.pv-v2 .pv-pagination li {
-  border: 1px solid #E3E7EA;
-  text-align: center;
-  width: 40px;
-  height: 40px;
-  color: inherit;
-  background-color: #FFFFFF;
-  font-weight: 700;
+.pv-v2 .pv-pagination[data-style=small] :where(button, a), .pv-v2 .pv-pagination :is(ul, ol)[data-style=small] :where(button, a) {
+  width: var(--pagination-small-item-width, 24px);
 }
-.pv-v2 .pv-pagination :not(:last-child),
-.pv-v2 .pv-pagination [role=list] li:last-child {
-  border-inline-end: 0;
+.pv-v2 .pv-pagination li,
+.pv-v2 .pv-pagination > :is(button, a):not(:last-child), .pv-v2 .pv-pagination :is(ul, ol) li,
+.pv-v2 .pv-pagination :is(ul, ol) > :is(button, a):not(:last-child) {
+  border-right: var(--pagination-border, 0);
 }
 .pv-v2 .pv-scroller {
   position: absolute;

package/_site/assets/css/pit-viper-v2.css

@@ -1,11 +1,7 @@
 @charset "UTF-8";
 /* toggle color styles should align with secondary and tertiary buttons */
-@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900");
-:root {
-  --select-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='16' viewBox='0 0 17 16' fill='none'%3E%3Cpath d='M4.16663 6L8.16663 10L12.1666 6' stroke='%2389989B' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-}
-
 /* toggle color styles should align with secondary and tertiary buttons */
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900");
 :where(*) {
   box-sizing: border-box;
   margin: 0;
@@ -1031,7 +1027,7 @@
   padding-inline-end: 2rem;
   background-repeat: no-repeat;
   background-size: 1rem 1rem;
-  background-position: top 50% right 0.5rem;
+  background-position: right 0.5rem center;
   text-align: unset;
 }
 .pv-select:not(:disabled, [data-invalid]):focus-visible, .pv-select:not(:disabled, [data-invalid]):hover,
@@ -1047,11 +1043,11 @@
 }
 
 .pv-select {
-  background-image: var(--select-background-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2302363D' d='m7.1 9.9 4.3 5.1c.1.1.2.1.3.2.1 0 .2.1.3.1s.2 0 .3-.1c.1 0 .2-.1.3-.2L17 9.9c.4-.5.1-1.2-.6-1.2H7.6c-.6 0-1 .8-.5 1.2z'/%3E%3C/svg%3E"));
+  background-image: var(--select-background-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.151 8.151a1.2 1.2 0 0 1 1.698 0L12 13.303l5.151-5.152A1.2 1.2 0 1 1 18.85 9.85l-6 6a1.2 1.2 0 0 1-1.697 0l-6-6a1.2 1.2 0 0 1 0-1.698Z' fill='%234B595C'/%3E%3C/svg%3E"));
 }
 
 .pv-select-multiple {
-  background-image: var(--select-multiple-closed-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.151 8.151a1.2 1.2 0 0 1 1.698 0L12 13.303l5.151-5.152A1.2 1.2 0 1 1 18.85 9.85l-6 6a1.2 1.2 0 0 1-1.697 0l-6-6a1.2 1.2 0 0 1 0-1.698Z' fill='%2302363D'/%3E%3C/svg%3E"));
+  background-image: var(--select-multiple-closed-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.151 8.151a1.2 1.2 0 0 1 1.698 0L12 13.303l5.151-5.152A1.2 1.2 0 1 1 18.85 9.85l-6 6a1.2 1.2 0 0 1-1.697 0l-6-6a1.2 1.2 0 0 1 0-1.698Z' fill='%234B595C'/%3E%3C/svg%3E"));
 }
 
 .pv-textarea {
@@ -2623,6 +2619,7 @@ strong[class*=pv-tag] {
   font-size: 0.6875rem;
   line-height: 14px;
   padding: 0 0.5rem;
+  border-radius: 2px;
 }
 
 .pv-tag-lg {
@@ -2660,10 +2657,11 @@ strong[class*=pv-tag] {
   background-color: #02363D;
 }
 
-.pv-tag-red {
-  background-color: #FFF1F1;
+.pv-tag-red,
+.pv-tag-error {
+  background-color: #FFEFEB;
   border-color: transparent;
-  color: #A2191F;
+  color: #FF471A;
 }
 
 .pv-tag-red-inverse {
@@ -2681,20 +2679,22 @@ strong[class*=pv-tag] {
   color: #121313;
 }
 
-.pv-tag-green {
-  background-color: #DEFBE6;
+.pv-tag-green,
+.pv-tag-success {
+  background-color: #E8FDEA;
   border-color: transparent;
-  color: #0E6027;
+  color: #0E8019;
 }
 
 .pv-tag-green-inverse {
   background-color: #198038;
 }
 
-.pv-tag-orange {
-  background-color: #FAEAE4;
+.pv-tag-orange,
+.pv-tag-warning {
+  background-color: #FFEED9;
   border-color: transparent;
-  color: #BA4E01;
+  color: #B26500;
 }
 
 .pv-tag-orange-inverse {
@@ -2722,6 +2722,11 @@ strong[class*=pv-tag] {
   color: #FFFFFF;
 }
 
+.pv-tag-highlight {
+  background-color: #E4F8F6;
+  color: #16696D;
+}
+
 button.pv-tag-primary:hover, button.pv-tag-primary:focus-visible {
   background-color: #0D5256;
 }
@@ -2987,7 +2992,7 @@ button.pv-tag-secondary:active {
   font-weight: 600;
 }
 .pv-select-multiple[data-dropdown] {
-  background-image: var(--select-multiple-open-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.151 15.848a1.2 1.2 0 0 0 1.698 0L12 10.698l5.151 5.15a1.2 1.2 0 1 0 1.698-1.697l-6-6a1.2 1.2 0 0 0-1.697 0l-6 6a1.2 1.2 0 0 0 0 1.697Z' fill='%23176f6f'/%3E%3C/svg%3E"));
+  background-image: var(--select-multiple-open-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.151 15.848a1.2 1.2 0 0 0 1.698 0L12 10.698l5.151 5.15a1.2 1.2 0 1 0 1.698-1.697l-6-6a1.2 1.2 0 0 0-1.697 0l-6 6a1.2 1.2 0 0 0 0 1.697Z' fill='%234B595C'/%3E%3C/svg%3E"));
   background-color: #ECECEC;
 }
 
@@ -3004,11 +3009,11 @@ button.pv-tag-secondary:active {
 }
 
 .pv-dropdown > [class*=pv-button] {
-  padding-inline-end: 40px;
+  padding-inline-end: 2rem;
   background-image: var(--dropdown-closed-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.151 8.151a1.2 1.2 0 0 1 1.698 0L12 13.303l5.151-5.152A1.2 1.2 0 1 1 18.85 9.85l-6 6a1.2 1.2 0 0 1-1.697 0l-6-6a1.2 1.2 0 0 1 0-1.698Z' fill='%23FFFFFF'/%3E%3C/svg%3E"));
   background-repeat: no-repeat;
-  background-size: 1.25rem 1.25rem;
-  background-position: right 1rem center;
+  background-size: 1rem 1rem;
+  background-position: right 0.5rem center;
 }
 .pv-dropdown > [class*=pv-button][data-dropdown] {
   background-image: var(--dropdown-open-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.151 15.848a1.2 1.2 0 0 0 1.698 0L12 10.698l5.151 5.15a1.2 1.2 0 1 0 1.698-1.697l-6-6a1.2 1.2 0 0 0-1.697 0l-6 6a1.2 1.2 0 0 0 0 1.697Z' fill='%23FFFFFF'/%3E%3C/svg%3E"));
@@ -3042,77 +3047,60 @@ pv-dropdown-auto-close.pv-dropdown > [class*=pv-button][data-dropdown] {
 }
 
 .pv-pagination {
-  display: flex;
-  justify-content: center;
-}
-.pv-pagination > button,
-.pv-pagination > a {
-  font-size: 1.5rem;
-  line-height: 1;
-  background-color: transparent;
-  transition-duration: 0.125s;
-  transition-property: background-color, color;
-}
-.pv-pagination > button:first-of-type,
-.pv-pagination > a:first-of-type {
-  border-radius: 2rem 0 0 2rem;
-}
-.pv-pagination > button:last-of-type,
-.pv-pagination > a:last-of-type {
-  border-radius: 0 2rem 2rem 0;
+  border-radius: var(--pagination-radius, 0);
+  border: var(--pagination-border, 0);
 }
-.pv-pagination > button:disabled, .pv-pagination > button:not([href]):not(button),
-.pv-pagination > a:disabled,
-.pv-pagination > a:not([href]):not(button) {
-  color: #ADB5C0;
-  background-color: #ECECEC;
-  user-select: none;
-  cursor: default;
-}
-.pv-pagination > button:hover,
-.pv-pagination > a:hover {
-  background-color: #ECECEC;
-  cursor: pointer;
-}
-.pv-pagination [role=list] {
-  display: flex;
+
+.pv-pagination, .pv-pagination :is(ul, ol) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--pagination-gap, 0.25rem);
+  overflow: clip;
 }
-.pv-pagination li {
+.pv-pagination :where(button, a), .pv-pagination :is(ul, ol) :where(button, a) {
   display: grid;
   place-items: center;
   user-select: none;
+  border: none;
+  text-decoration: none;
+  aspect-ratio: 1;
+  padding: 0;
+  color: var(--pagination-item-color, #4B595C);
+  font-size: var(--pagination-font-size, 0.75rem);
+  font-weight: var(--pagination-font-weight, 500);
+  line-height: var(--pagination-line-height, 1.33333333);
+  background-color: var(--pagination-background-color, transparent);
+  border-radius: var(--pagination-item-radius, 4px);
+  width: var(--pagination-item-width, 32px);
+}
+.pv-pagination :where(button, a):not(:disabled), .pv-pagination :is(ul, ol) :where(button, a):not(:disabled) {
+  cursor: pointer;
 }
-.pv-pagination a {
-  display: block;
-  line-height: 38px;
-  transition-duration: 0.125s;
-  transition-property: background-color, color;
-  width: 40px;
+.pv-pagination :where(button, a):not(:disabled):hover, .pv-pagination :where(button, a):not(:disabled):focus-visible, .pv-pagination :is(ul, ol) :where(button, a):not(:disabled):hover, .pv-pagination :is(ul, ol) :where(button, a):not(:disabled):focus-visible {
+  background-color: var(--pagination-item-hover-background-color, #E8F2F4);
 }
-.pv-pagination a[aria-current=page] {
-  background-color: #16696D;
-  color: #FFFFFF;
+.pv-pagination :where(button, a):not(:disabled):active, .pv-pagination :is(ul, ol) :where(button, a):not(:disabled):active {
+  background-color: var(--pagination-item-pressed-background-color, #C7D8DB);
 }
-.pv-pagination a:hover, .pv-pagination a:focus-visible {
-  text-decoration: none;
+.pv-pagination :where(button, a):disabled, .pv-pagination :is(ul, ol) :where(button, a):disabled {
+  color: var(--pagination-disabled-color, #7D898D);
+  background-color: var(--pagination-disabled-background-color, #ECECEC);
 }
-.pv-pagination a:hover:not([aria-current=page]), .pv-pagination a:focus-visible:not([aria-current=page]) {
-  background-color: #ECECEC;
+.pv-pagination [aria-current=page] :is(button, a),
+.pv-pagination [aria-current=page] :is(button, a):hover,
+.pv-pagination [aria-current=page] :is(button, a):focus-visible, .pv-pagination :is(ul, ol) [aria-current=page] :is(button, a),
+.pv-pagination :is(ul, ol) [aria-current=page] :is(button, a):hover,
+.pv-pagination :is(ul, ol) [aria-current=page] :is(button, a):focus-visible {
+  color: var(--pagination-item-active-color, #FFFFFF);
+  background-color: var(--pagination-item-active-background-color, #16696D);
 }
-.pv-pagination > button,
-.pv-pagination > a,
-.pv-pagination li {
-  border: 1px solid #E3E7EA;
-  text-align: center;
-  width: 40px;
-  height: 40px;
-  color: inherit;
-  background-color: #FFFFFF;
-  font-weight: 700;
+.pv-pagination[data-style=small] :where(button, a), .pv-pagination :is(ul, ol)[data-style=small] :where(button, a) {
+  width: var(--pagination-small-item-width, 24px);
 }
-.pv-pagination :not(:last-child),
-.pv-pagination [role=list] li:last-child {
-  border-inline-end: 0;
+.pv-pagination li,
+.pv-pagination > :is(button, a):not(:last-child), .pv-pagination :is(ul, ol) li,
+.pv-pagination :is(ul, ol) > :is(button, a):not(:last-child) {
+  border-right: var(--pagination-border, 0);
 }
 
 .pv-scroller {