globuswebcomponents 0.3.3 → 0.3.5

package/dist/collection/components/{test-tooltip/test-tooltip.css → gb-pagination-number-base/gb-pagination-number-base.css}

@@ -1548,1011 +1548,30 @@
     --rounded-2xl: 2rem;
     --rounded-full: 62.438rem;
 }
-@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');
 
-:root{
-    /* Font Sizes */
-    --font-size-d-2xl: 4.5rem;
-    --font-size-d-xl: 3.75rem;
-    --font-size-d-lg: 3rem;
-    --font-size-d-md: 2.25rem;
-    --font-size-d-sm: 1.875rem;
-    --font-size-d-xs: 1.5rem;
-    --font-size-t-xl: 1.25rem;
-    --font-size-t-lg: 1.125rem;
-    --font-size-t-md: 1rem;
-    --font-size-t-sm: 0.875rem;
-    --font-size-t-xs: 0.75rem;
-
-    /* Font Weights */
-    --font-weight-bold: 700;
-    --font-weight-semi-bold: 600;
-    --font-weight-medium: 500;
-    --font-weight-regular: 400; 
-
-    /* Line Heights */
-    --font-line-height-d-2xl: 5rem;
-    --font-line-height-d-xl: 4.25rem;
-    --font-line-height-d-lg: 4.25rem; /**/
-    --font-line-height-d-md: 2.75rem;
-    --font-line-height-d-sm: 2.375rem;   
-    --font-line-height-d-xs: 2rem;   
-    --font-line-height-t-xl: 1.875rem;
-    --font-line-height-t-lg: 1.75rem;
-    --font-line-height-t-md: 1.5rem;
-    --font-line-height-t-sm: 1.25rem;
-    --font-line-height-t-xs: 1.125rem;
-
-    /* Letter Spacings */
-    --font-letter-spacing-d-2xl: -0.09rem;
-    --font-letter-spacing-d-xl: -0.075rem;
-    --font-letter-spacing-d-lg: -0.075rem;
-    --font-letter-spacing-d-md: -0.045rem;
-    --font-letter-spacing-d-sm: 0rem;
-    --font-letter-spacing-d-xs: 0rem;
-
-    /* Font Families */
-    --font-family-title: 'Sora';
-    --font-family-body: 'Sora';
-}
-
-/* Media queries for medium screens (tablet) */
-@media (max-width: 1199px) {
-    :root{
-        /* Font Sizes */
-        --font-size-d-2xl: 3.75rem;
-        --font-size-d-xl: 3.5rem;
-        --font-size-d-lg: 2.75rem;
-        --font-size-d-md: 2.25rem;
-        --font-size-d-sm: 1.875rem;
-        --font-size-d-xs: 1.5rem;
-
-        /* Line Heights */
-        --font-line-height-d-2xl: 4.25rem;
-        --font-line-height-d-xl: 3.75rem;
-        --font-line-height-d-lg: 2.4375rem;
-        --font-line-height-d-md: 2.75rem;
-        --font-line-height-d-sm: 2.375rem;
-        --font-line-height-d-xs: 2rem;
-
-        /* Letter Spacings */
-        --font-letter-spacing-2xl: -0.075rem;
-        --font-letter-spacing-xl: -0.065rem;
-        --font-letter-spacing-lg: -0.045rem;
-        --font-letter-spacing-md: -0.045rem;
-        --font-letter-spacing-sm: 0rem;
-        --font-letter-spacing-xs: 0rem;
-    }
-}
-
-/* Media queries for smaller screens (mobile) */
-@media (max-width: 743px) {
-    :root{
-        /* Font Sizes */
-        --font-size-d-2xl: 3rem;
-        --font-size-d-xl: 2.5rem;
-        --font-size-d-lg: 2rem;
-        --font-size-d-md: 1.75rem;
-        --font-size-d-sm: 1.5rem;
-        --font-size-d-xs: 1.25rem;
-
-        /* Line Heights */
-        --font-line-height-d-2xl: 3.375rem;
-        --font-line-height-d-xl: 2.875rem;
-        --font-line-height-d-lg: 2.5rem;
-        --font-line-height-d-md: 2.1375rem;
-        --font-line-height-d-sm: 2rem;
-        --font-line-height-d-xs: 1.75rem;
-
-        /* Letter Spacings */
-        --font-letter-spacing-2xl: -0.06rem;
-        --font-letter-spacing-xl: -0.05rem;
-        --font-letter-spacing-lg: -0.045rem;
-        --font-letter-spacing-md: 0rem;
-        --font-letter-spacing-sm: 0rem;
-        --font-letter-spacing-xs: 0rem;
-    }
-}
-
-.display-2xl-bold{
-    font-family: var(--font-family-title);
-    font-size: var(--font-size-d-2xl);
-    font-weight: var(--font-weight-bold);
-    line-height: var(--font-line-height-d-2xl);
-    letter-spacing: var(--font-letter-spacing-d-2xl);
-    margin: var(--spacing-none);
-    padding: var(--spacing-none);
-    display: inline-block;
-    position: relative;
-}
-
-.display-2xl-bold::before,
-.display-2xl-bold::after{
-    content: "";
-    display: table;
-}
-
-.display-2xl-bold::before{
-    margin-bottom: -0.135em;
-}
-
-.display-2xl-bold::after{
-    margin-top: -0.205em;
-}
-
-.display-2xl-semi-bold{
-    font-family: var(--font-family-title);
-    font-size: var(--font-size-d-2xl);
-    font-weight: var(--font-weight-semi-bold);
-    line-height: var(--font-line-height-d-2xl);
-    letter-spacing: var(--font-letter-spacing-d-2xl);
-    margin: var(--spacing-none);
-    padding: var(--spacing-none);
-    display: inline-block;
-    position: relative;
-}
-
-.display-2xl-semi-bold::before,
-.display-2xl-semi-bold::after{
-    content: "";
-    display: table;
-}
-
-.display-2xl-semi-bold::before{
-    margin-bottom: -0.135em;
-}
-
-.display-2xl-semi-bold::after{
-    margin-top: -0.205em;
-}
-
-.display-xl-bold{
-    font-family: var(--font-family-title);
-    font-size: var(--font-size-d-xl);
-    font-weight: var(--font-weight-bold);
-    line-height: var(--font-line-height-d-xl);
-    letter-spacing: var(--font-letter-spacing-d-xl);
-    margin: var(--spacing-none);
-    padding: var(--spacing-none);
-    display: inline-block;
-    position: relative;
-}
-
-.display-xl-bold::before,
-.display-xl-bold::after{
-    content: "";
-    display: table;
-}
-
-.display-xl-bold::before{
-    margin-bottom: -0.145em;
-}
-
-.display-xl-bold::after{
-    margin-top: -0.215em;
-}
-
-.display-xl-semi-bold{
-    font-family: var(--font-family-title);
-    font-size: var(--font-size-d-xl);
-    font-weight: var(--font-weight-semi-bold);
-    line-height: var(--font-line-height-d-xl);
-    letter-spacing: var(--font-letter-spacing-d-xl);
-    margin: var(--spacing-none);
-    padding: var(--spacing-none);
-    display: inline-block;
-    position: relative;
-}
-
-.display-xl-semi-bold::before,
-.display-xl-semi-bold::after{
-    content: "";
-    display: table;
-}
-
-.display-xl-semi-bold::before{
-    margin-bottom: -0.145em;
-}
-
-.display-xl-semi-bold::after{
-    margin-top: -0.215em;
-}
-
-.display-lg-bold{
-    font-family: var(--font-family-title);
-    font-size: var(--font-size-d-lg);
-    font-weight: var(--font-weight-bold);
-    line-height: var(--font-line-height-d-lg);
-    letter-spacing: var(--font-letter-spacing-d-lg);
-    margin: var(--spacing-none);
-    padding: var(--spacing-none);
-    display: inline-block;
-    position: relative;
-}
-
-.display-lg-bold::before,
-.display-lg-bold::after{
-    content: "";
-    display: table;
-}
-
-.display-lg-bold::before{
-    margin-bottom: -0.015em;
-}
-
-.display-lg-bold::after{
-    margin-top: -0.095em;
-}
-
-.display-lg-semi-bold{
-    font-family: var(--font-family-title);
-    font-size: var(--font-size-d-lg);
-    font-weight: var(--font-weight-semi-bold);
-    line-height: var(--font-line-height-d-lg);
-    letter-spacing: var(--font-letter-spacing-d-lg);
-    margin: var(--spacing-none);
-    padding: var(--spacing-none);
-    display: inline-block;
-    position: relative;
-}
-
-.display-lg-semi-bold::before,
-.display-lg-semi-bold::after{
-    content: "";
-    display: table;
-}
-
-.display-lg-semi-bold::before{
-    margin-bottom: -0.015em;
-}
-
-.display-lg-semi-bold::after{
-    margin-top: -0.095em;
-}
-
-.display-md-bold{
-    font-family: var(--font-family-title);
-    font-size: var(--font-size-d-md);
-    font-weight: var(--font-weight-bold);
-    line-height: var(--font-line-height-d-md);
-    letter-spacing: var(--font-letter-spacing-d-md);
-    margin: var(--spacing-none);
-    padding: var(--spacing-none);
-    display: inline-block;
-    position: relative;
-}
-
-.display-md-bold::before,
-.display-md-bold::after{
-    content: "";
-    display: table;
-}
-
-.display-md-bold::before{
-    margin-bottom: -0.195em;
-}
-
-.display-md-bold::after{
-    margin-top: -0.255em;
-}
-
-.display-md-semi-bold{
-    font-family: var(--font-family-title);
-    font-size: var(--font-size-d-md);
-    font-weight: var(--font-weight-semi-bold);
-    line-height: var(--font-line-height-d-md);
-    letter-spacing: var(--font-letter-spacing-d-md);
-    margin: var(--spacing-none);
-    padding: var(--spacing-none);
-    display: inline-block;
-    position: relative;
-}
-
-.display-md-semi-bold::before,
-.display-md-semi-bold::after{
-    content: "";
-    display: table;
-}
-
-.display-md-semi-bold::before{
-    margin-bottom: -0.195em;
-}
-
-.display-md-semi-bold::after{
-    margin-top: -0.255em;
-}
-
-.display-sm-bold{
-    font-family: var(--font-family-title);
-    font-size: var(--font-size-d-sm);
-    font-weight: var(--font-weight-bold);
-    line-height: var(--font-line-height-d-sm);
-    letter-spacing: var(--font-letter-spacing-d-sm);
-    margin: var(--spacing-none);
-    padding: var(--spacing-none);
-    display: inline-block;
-    position: relative;
-}
-
-.display-sm-bold::before,
-.display-sm-bold::after{
-    content: "";
-    display: table;
-}
-
-.display-sm-bold::before{
-    margin-bottom: -0.195em;
-}
-
-.display-sm-bold::after{
-    margin-top: -0.255em;
-}
-
-.display-sm-semi-bold{
-    font-family: var(--font-family-title);
-    font-size: var(--font-size-d-sm);
-    font-weight: var(--font-weight-semi-bold);
-    line-height: var(--font-line-height-d-sm);
-    letter-spacing: var(--font-letter-spacing-d-sm);
-    margin: var(--spacing-none);
-    padding: var(--spacing-none);
-    display: inline-block;
-    position: relative;
-}
-
-.display-sm-semi-bold::before,
-.display-sm-semi-bold::after{
-    content: "";
-    display: table;
-}
-
-.display-sm-semi-bold::before{
-    margin-bottom: -0.195em;
-}
-
-.display-sm-semi-bold::after{
-    margin-top: -0.255em;
-}
-
-.display-xs-bold{
-    font-family: var(--font-family-title);
-    font-size: var(--font-size-d-xs);
-    font-weight: var(--font-weight-bold);
-    line-height: var(--font-line-height-d-xs);
-    letter-spacing: var(--font-letter-spacing-d-xs);
-    margin: var(--spacing-none);
-    padding: var(--spacing-none);
-    display: inline-block;
-    position: relative;
-}
-
-.display-xs-bold::before,
-.display-xs-bold::after{
-    content: "";
-    display: table;
-}
-
-.display-xs-bold::before{
-    margin-bottom: -0.199em;
-}
-
-.display-xs-bold::after{
-    margin-top: -0.195em; /* Continue from here */
-}
-
-.display-xs-semi-bold{
-    font-family: var(--font-family-title);
-    font-size: var(--font-size-d-xs);
-    font-weight: var(--font-weight-semi-bold);
-    line-height: var(--font-line-height-d-xs);
-    letter-spacing: var(--font-letter-spacing-d-xs);
-    margin: var(--spacing-none);
-    padding: var(--spacing-none);
-    display: inline-block;
-    position: relative;
-}
-
-.display-xs-semi-bold::before,
-.display-xs-semi-bold::after{
-    content: "";
-    display: table;
-}
-
-.display-xs-semi-bold::before{
-    margin-bottom: -0.259em;
-}
-
-.display-xs-semi-bold::after{
-    margin-top: -0.295em;
-}
-
-.text-xl-bold{
-    font-family: var(--font-family-body);
-    font-size: var(--font-size-t-xl);
-    font-weight: var(--font-weight-bold);
-    line-height: var(--font-line-height-t-xl);
-    margin: var(--spacing-none);
-    padding: var(--spacing-none);
-    display: inline-block;
-    position: relative;
-}
-
-.text-xl-bold::before,
-.text-xl-bold::after{
-    content: "";
-    display: table;
-}
-
-.text-xl-bold::before{
-    margin-bottom: -0.329em;
-}
-
-.text-xl-bold::after{
-    margin-top: -0.359em;
-}
-
-.text-xl-semi-bold{
-    font-family: var(--font-family-body);
-    font-size: var(--font-size-t-xl);
-    font-weight: var(--font-weight-semi-bold);
-    line-height: var(--font-line-height-t-xl);
-    margin: var(--spacing-none);
-    padding: var(--spacing-none);
-    display: inline-block;
-    position: relative;
-}
-
-.text-xl-semi-bold::before,
-.text-xl-semi-bold::after{
-    content: "";
-    display: table;
-}
-
-.text-xl-semi-bold::before{
-    margin-bottom: -0.329em;
-}
-
-.text-xl-semi-bold::after{
-    margin-top: -0.359em;
-}
-
-.text-xl-medium{
-    font-family: var(--font-family-body);
-    font-size: var(--font-size-t-xl);
-    font-weight: var(--font-weight-medium);
-    line-height: var(--font-line-height-t-xl);
-    margin: var(--spacing-none);
-    padding: var(--spacing-none);
-    display: inline-block;
-    position: relative;
-}
-
-.text-xl-medium::before,
-.text-xl-medium::after{
-    content: "";
-    display: table;
-}
-
-.text-xl-medium::before{
-    margin-bottom: -0.339em;
-}
-
-.text-xl-medium::after{
-    margin-top: -0.399em;
-}
-
-.text-xl-regular{
-    font-family: var(--font-family-body);
-    font-size: var(--font-size-t-xl);
-    font-weight: var(--font-weight-regular);
-    line-height: var(--font-line-height-t-xl);
-    margin: var(--spacing-none);
-    padding: var(--spacing-none);
-    display: inline-block;
-    position: relative;
-}
-
-.text-xl-regular::before,
-.text-xl-regular::after{
-    content: "";
-    display: table;
-}
-
-.text-xl-regular::before{
-    margin-bottom: -0.339em;
-}
-
-.text-xl-regular::after{
-    margin-top: -0.399em;
-}
-
-.text-lg-bold{
-    font-family: var(--font-family-body);
-    font-size: var(--font-size-t-lg);
-    font-weight: var(--font-weight-bold);
-    line-height: var(--font-line-height-t-lg);
-    margin: var(--spacing-none);
-    padding: var(--spacing-none);
-    display: inline-block;
-    position: relative;
-}
-
-.text-lg-bold::before,
-.text-lg-bold::after{
-    content: "";
-    display: table;
-}
-
-.text-lg-bold::before{
-    margin-bottom: -0.339em;
-}
-
-.text-lg-bold::after{
-    margin-top: -0.399em;
-}
-
-.text-lg-semi-bold{
-    font-family: var(--font-family-body);
-    font-size: var(--font-size-t-lg);
-    font-weight: var(--font-weight-semi-bold);
-    line-height: var(--font-line-height-t-lg);
-    margin: var(--spacing-none);
-    padding: var(--spacing-none);
-    display: inline-block;
-    position: relative;
-}
-
-.text-lg-semi-bold::before,
-.text-lg-semi-bold::after{
-    content: "";
-    display: table;
-}
-
-.text-lg-semi-bold::before{
-    margin-bottom: -0.339em;
-}
-
-.text-lg-semi-bold::after{
-    margin-top: -0.399em;
-}
-
-.text-lg-medium{
-    font-family: var(--font-family-body);
-    font-size: var(--font-size-t-lg);
-    font-weight: var(--font-weight-medium);
-    line-height: var(--font-line-height-t-lg);
-    margin: var(--spacing-none);
-    padding: var(--spacing-none);
-    display: inline-block;
-    position: relative;
-}
-
-.text-lg-medium::before,
-.text-lg-medium::after{
-    content: "";
-    display: table;
-}
-
-.text-lg-medium::before{
-    margin-bottom: -0.349em;
-}
-
-.text-lg-medium::after{
-    margin-top: -0.389em;
-}
-
-.text-lg-regular{
-    font-family: var(--font-family-body);
-    font-size: var(--font-size-t-lg);
-    font-weight: var(--font-weight-regular);
-    line-height: var(--font-line-height-t-lg);
-    margin: var(--spacing-none);
-    padding: var(--spacing-none);
-    display: inline-block;
-    position: relative;
-}
-
-.text-lg-regular::before,
-.text-lg-regular::after{
-    content: "";
-    display: table;
-}
-
-.text-lg-regular::before{
-    margin-bottom: -0.349em;
-}
-
-.text-lg-regular::after{
-    margin-top: -0.389em;
-}
-
-.text-md-bold{
-    font-family: var(--font-family-body);
-    font-size: var(--font-size-t-md);
-    font-weight: var(--font-weight-bold);
-    line-height: var(--font-line-height-t-md);
-    margin: var(--spacing-none);
-    padding: var(--spacing-none);
-    display: inline-block;
-    position: relative;
-}
-
-.text-md-bold::before,
-.text-md-bold::after{
-    content: "";
-    display: table;
-}
-
-.text-md-bold::before{
-    margin-bottom: -0.349em;
-}
-
-.text-md-bold::after{
-    margin-top: -0.389em;
-}
-
-.text-md-semi-bold{
-    font-family: var(--font-family-body);
-    font-size: var(--font-size-t-md);
-    font-weight: var(--font-weight-semi-bold);
-    line-height: var(--font-line-height-t-md);
-    margin: var(--spacing-none);
-    padding: var(--spacing-none);
-    display: inline-block;
-    position: relative;
-}
-
-.text-md-semi-bold::before,
-.text-md-semi-bold::after{
-    content: "";
-    display: table;
-}
-
-.text-md-semi-bold::before{
-    margin-bottom: -0.349em;
-}
-
-.text-md-semi-bold::after{
-    margin-top: -0.389em;
-}
-
-.text-md-medium{
-    font-family: var(--font-family-body);
-    font-size: var(--font-size-t-md);
-    font-weight: var(--font-weight-medium);
-    line-height: var(--font-line-height-t-md);
-    margin: var(--spacing-none);
-    padding: var(--spacing-none);
-    display: inline-block;
-    position: relative;
-}
-
-.text-md-medium::before,
-.text-md-medium::after{
-    content: "";
-    display: table;
-}
-
-.text-md-medium::before{
-    margin-bottom: -0.349em;
-}
-
-.text-md-medium::after{
-    margin-top: -0.389em;
-}
-
-.text-md-regular{
-    font-family: var(--font-family-body);
-    font-size: var(--font-size-t-md);
-    font-weight: var(--font-weight-regular);
-    line-height: var(--font-line-height-t-md);
-    margin: var(--spacing-none);
-    padding: var(--spacing-none);
-    display: inline-block;
-    position: relative;
-}
-
-.text-md-regular::before,
-.text-md-regular::after{
-    content: "";
-    display: table;
-}
-
-.text-md-regular::before{
-    margin-bottom: -0.349em;
-}
-
-.text-md-regular::after{
-    margin-top: -0.389em;
-}
-
-.text-sm-bold{
-    font-family: var(--font-family-body);
-    font-size: var(--font-size-t-sm);
-    font-weight: var(--font-weight-bold);
-    line-height: var(--font-line-height-t-sm);
-    margin: var(--spacing-none);
-    padding: var(--spacing-none);
-    display: inline-block;
-    position: relative;
-}
-
-.text-sm-bold::before,
-.text-sm-bold::after{
-    content: "";
-    display: table;
-}
-
-.text-sm-bold::before{
-    margin-bottom: -0.299em;
-}
-
-.text-sm-bold::after{
-    margin-top: -0.349em;
-}
-
-.text-sm-semi-bold{
-    font-family: var(--font-family-body);
-    font-size: var(--font-size-t-sm);
-    font-weight: var(--font-weight-semi-bold);
-    line-height: var(--font-line-height-t-sm);
-    margin: var(--spacing-none);
-    padding: var(--spacing-none);
-    display: inline-block;
-    position: relative;
-}
-
-.text-sm-semi-bold::before,
-.text-sm-semi-bold::after{
-    content: "";
-    display: table;
-}
-
-.text-sm-semi-bold::before{
-    margin-bottom: -0.299em;
-}
-
-.text-sm-semi-bold::after{
-    margin-top: -0.349em;
-}
-
-.text-sm-medium{
-    font-family: var(--font-family-body);
-    font-size: var(--font-size-t-sm);
-    font-weight: var(--font-weight-medium);
-    line-height: var(--font-line-height-t-sm);
-    margin: var(--spacing-none);
-    padding: var(--spacing-none);
-    position: relative;
-    display: inline-block;
-}
-
-.text-sm-medium::before,
-.text-sm-medium::after{
-    content: "";
-    display: table;
-}
-
-.text-sm-medium::before{
-    margin-bottom: -0.299em;
-}
-
-.text-sm-medium::after{
-    margin-top: -0.299em;
-}
-
-.text-sm-regular{
-    font-family: var(--font-family-body);
-    font-size: var(--font-size-t-sm);
-    font-weight: var(--font-weight-regular);
-    line-height: var(--font-line-height-t-sm);
-    margin: var(--spacing-none);
-    padding: var(--spacing-none);
-    position: relative;
-    display: inline-block;
-}
-
-.text-sm-regular::before,
-.text-sm-regular::after{
-    content: "";
-    display: table;
-}
-
-.text-sm-regular::before{
-    margin-bottom: -0.299em;
-}
-
-.text-sm-regular::after{
-    margin-top: -0.299em;
-}
-
-.text-xs-bold{
-    font-family: var(--font-family-body);
-    font-size: var(--font-size-t-xs);
-    font-weight: var(--font-weight-bold);
-    line-height: var(--font-line-height-t-xs);
-    margin: var(--spacing-none);
-    padding: var(--spacing-none);
-    display: inline-block;
-    position: relative;
-}
-
-.text-xs-bold::before,
-.text-xs-bold::after{
-    content: "";
-    display: table;
-}
-
-.text-xs-bold::before{
-    margin-bottom: -0.291em;
-}
-
-.text-xs-bold::after{
-    margin-top: -0.416em;
-}
-
-.text-xs-semi-bold{
-    font-family: var(--font-family-body);
-    font-size: var(--font-size-t-xs);
-    font-weight: var(--font-weight-semi-bold);
-    line-height: var(--font-line-height-t-xs);
-    margin: var(--spacing-none);
-    padding: var(--spacing-none);
-    display: inline-block;
-    position: relative;
-}
-
-.text-xs-semi-bold::before,
-.text-xs-semi-bold::after{
-    content: "";
-    display: table;
-}
-
-.text-xs-semi-bold::before{
-    margin-bottom: -0.321em;
+.page_number_base{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    cursor: pointer;
 }
 
-.text-xs-semi-bold::after{
-    margin-top: -0.416em;
-}
-
-.text-xs-medium{
-    font-family: var(--font-family-body);
-    font-size: var(--font-size-t-xs);
-    font-weight: var(--font-weight-medium);
-    line-height: var(--font-line-height-t-xs);
-    margin: var(--spacing-none);
-    padding: var(--spacing-none);
-    display: inline-block;
-    position: relative;
-}
-
-.text-xs-medium::before,
-.text-xs-medium::after{
-    content: "";
-    display: table;
-}
-
-.text-xs-medium::before{
-    margin-bottom: -0.199em;
-}
-
-.text-xs-medium::after{
-    margin-top: -0.196em;
-}
-
-.text-xs-regular{
-    font-family: var(--font-family-body);
-    font-size: var(--font-size-t-xs);
-    font-weight: var(--font-weight-regular);
-    line-height: var(--font-line-height-t-xs);
-    margin: var(--spacing-none);
-    padding: var(--spacing-none);
-    display: inline-block;
-    position: relative;
-}
-
-.text-xs-regular::before,
-.text-xs-regular::after{
-    content: "";
-    display: table;
-}
-
-.text-xs-regular::before{
-    margin-bottom: -0.291em;
-}
-
-.text-xs-regular::after{
-    margin-top: -0.396em;
-}
-
-.tooltip-container {
-  position: relative;
-  display: inline-block;
-}
- 
-.tooltip {
-  position: absolute;
-  background-color: var(--color-surface-bold, #FCFCFC);
-    border: 0.5px solid var(--color-border-subtler, #E3E8EF);
+/* Shape Styles */
+.page_number_base.square{
     border-radius: var(--rounded-sm);
-    box-shadow: var(--shadow-sm);
-  color: #333;
-  padding: 8px;
-  white-space: nowrap;
-  z-index: 10;
-}
- 
-.tooltip-content {
-  font-size: 14px;
-  color: #333;
-}
- 
-.arrow {
-  width: 0;
-  height: 0;
-  border-style: solid;
-  position: absolute;
 }
 
-.arrow::before {
-  content: '';
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-style: solid;
-}
- 
-.arrow.bottom-center {
-  top: 100%;
-  left: 50%;
-  border-width: 8px 8px 0 8px;
-  border-color: #fff transparent transparent transparent;
-  transform: translateX(-50%);
-}
- 
-.arrow.left {
-  top: 50%;
-  right: 100%;
-  border-width: 6px 0 6px 6px;
-  border-color: transparent transparent transparent #E3E8EF;
-  transform: translateY(-50%) rotate(180deg);
+.page_number_base.circle{
+    border-radius: 1.25rem;
 }
 
-.arrow.left::before {
-  left: -8px;
-  top: 50%;
-  transform: translateY(-50%);
-  border-width: 7.5px 0 7.5px 7.5px;
-  border-color: transparent transparent transparent #fff;
-}
- 
-.arrow.right {
-  top: 50%;
-  left: 100%;
-  border-width: 8px 8px 8px 0;
-  border-color: transparent #fff transparent transparent;
-  transform: translateY(-50%);
-}
- 
-.arrow-right::before {
-  right: -8px;
-  top: 50%;
-  transform: translateY(-50%);
-  border-width: 8px 8px 8px 0;
-  border-color: transparent #d3d3d3 transparent transparent;
+/* State Styles */
+.page_number_base:hover{
+    background-color: var(--color-background-information-subtler, #C8E0F9);
 }
 
-.arrow.top-left {
-  bottom: 100%;
-  left: 0;
-  border-width: 0 8px 8px 8px;
-  border-color: transparent transparent #fff transparent;
-}
- 
-.arrow.top-right {
-  bottom: 100%;
-  right: 0;
-  border-width: 0 8px 8px 8px;
-  border-color: transparent transparent #fff transparent;
+.page_number_base:active{
+    background-color: var(--color-background-information-subtle, #9AC7F4);
 }