@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-part-spacing: @dls-padding-unit * 6;
@dls-pagination-content-spacing: @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;

@dls-pagination-page-item-font-color-current: @dls-foreground-color-primary;
@dls-pagination-page-item-background-color-current: @dls-background-color-current;
@dls-pagination-page-item-background-color-current-hover: @dls-background-color-current-hover;
@dls-pagination-page-item-background-color-current-focus: @dls-pagination-page-item-background-color-current-hover;
@dls-pagination-page-item-background-color-current-active: @dls-background-color-current-active;