@use 'color-vars' as *;
@use 'layout-vars' as *;

$pagination-color:                              $component-color-link;
$pagination-bg:                                 $component-background-default;
$pagination-border:                             $component-border-color;

$pagination-hover-color:                        $component-color-link-hover;
$pagination-hover-bg:                           $component-background-default;
$pagination-hover-border:                       $component-border-color;

$pagination-color-active:                       $palette-high;
$pagination-active-bg:                          $component-brand-primary;
$pagination-active-border:                      $component-brand-primary;

$pagination-disabled-color:                     $component-color-disabled;
$pagination-disabled-bg:                        $component-background-default;
$pagination-disabled-border:                    $component-color-disabled;

$pager-bg:                                      $pagination-bg;
$pager-border:                                  $pagination-border;

$pager-hover-bg:                                $pagination-hover-bg;

$pager-active-bg:                               $pagination-active-bg;
$pager-color-active:                            $pagination-color-active;

$pager-disabled-color:                          $pagination-disabled-color;

$pager-border-radius:                           $size-16;