@import "../global.less";
@import "./button.less";

/* Metrics */
@dls-pagination-font-size-xs: @dls-font-size-0;
@dls-pagination-font-size-s: @dls-font-size-0;
@dls-pagination-font-size-m: @dls-font-size-1;

@dls-pagination-page-item-min-width-xs: @dls-button-height-xs;
@dls-pagination-page-item-min-width-s: @dls-button-height-s;
@dls-pagination-page-item-min-width-m: @dls-button-height-m;

@dls-pagination-page-item-padding-x: @dls-padding-unit * 1;
@dls-pagination-page-item-spacing: @dls-padding-unit * 1;

@dls-pagination-page-items-margin-before: @dls-padding-unit * 12;
@dls-pagination-page-items-margin-after: @dls-padding-unit * 6;

@dls-pagination-spacing-1: @dls-padding-unit * 2;
@dls-pagination-spacing-2: @dls-padding-unit * 2;

@dls-pagination-goto-input-padding-x: @dls-padding-unit * 2;
@dls-pagination-goto-input-digits: 3;
// 3 digits + padding-x + border-width
@dls-pagination-goto-input-width: dls-sum(
  1ch * @dls-pagination-goto-input-digits,
  @dls-pagination-goto-input-padding-x * 2,
  2px
);

@dls-pagination-page-item-font-color: @dls-foreground-color-neutral;
@dls-pagination-page-item-font-color-disabled: @dls-foreground-color-neutral-disabled;

@dls-pagination-page-item-background-color: @dls-background-color-pressable;
@dls-pagination-page-item-background-color-hover: @dls-background-color-pressable-hover;
@dls-pagination-page-item-background-color-focus: @dls-pagination-page-item-background-color-hover;
@dls-pagination-page-item-background-color-active: @dls-background-color-pressable-active;
@dls-pagination-page-item-background-color-disabled: @dls-pagination-page-item-background-color;

/* Use primary button styles for current page styles */