:root {
  --ty-pagination-color: var(--ty-color-text-secondary);
  --ty-pagination-font-size: 14px;
  --ty-pagination-item-bg: var(--ty-color-bg-container);
  --ty-pagination-item-radius: 2px;
  --ty-pagination-item-transition-duration: 400ms;
  --ty-pagination-item-color-ellipsis: var(--ty-color-text-quaternary);
  --ty-pagination-item-color-ellipsis-hover: var(--ty-color-primary);
  --ty-pagination-item-size-md: 32px;
  --ty-pagination-item-size-sm: 24px;
  --ty-pagination-item-gap-md: 4px;
  --ty-pagination-item-gap-sm: 0.5px;
  --ty-pagination-item-line-height-md: 30px;
  --ty-pagination-item-line-height-sm: 22px;
  --ty-pagination-item-border-md: var(--ty-color-border);
  --ty-pagination-item-color-active: var(--ty-color-primary);
  --ty-pagination-item-border-active: var(--ty-color-primary);
  --ty-pagination-item-border-hover: var(--ty-color-primary);
  --ty-pagination-item-color-hover-sm: var(--ty-color-primary);
  --ty-pagination-disabled-active-bg: #dbdbdb;
  --ty-pagination-disabled-active-color: #fff;
  --ty-pagination-disabled-bg: var(--ty-color-fill-secondary);
  --ty-pagination-disabled-color-md: var(--ty-color-text-tertiary);
  --ty-pagination-disabled-color-sm: #d9d9d9;
}

[data-tiny-theme='dark'] {
  --ty-pagination-color: var(--ty-color-text-secondary);
  --ty-pagination-font-size: 14px;
  --ty-pagination-item-bg: #1f1f1f;
  --ty-pagination-item-radius: 2px;
  --ty-pagination-item-transition-duration: 400ms;
  --ty-pagination-item-color-ellipsis: var(--ty-color-text-quaternary);
  --ty-pagination-item-color-ellipsis-hover: var(--ty-color-primary);
  --ty-pagination-item-size-md: 32px;
  --ty-pagination-item-size-sm: 24px;
  --ty-pagination-item-gap-md: 4px;
  --ty-pagination-item-gap-sm: 0.5px;
  --ty-pagination-item-line-height-md: 30px;
  --ty-pagination-item-line-height-sm: 22px;
  --ty-pagination-item-border-md: var(--ty-color-border);
  --ty-pagination-item-color-active: var(--ty-color-primary);
  --ty-pagination-item-border-active: var(--ty-color-primary);
  --ty-pagination-item-border-hover: var(--ty-color-primary);
  --ty-pagination-item-color-hover-sm: var(--ty-color-primary);
  --ty-pagination-disabled-active-bg: #424242;
  --ty-pagination-disabled-active-color: #fff;
  --ty-pagination-disabled-bg: #2a2a2a;
  --ty-pagination-disabled-color-md: #525252;
  --ty-pagination-disabled-color-sm: #525252;
}

@media (prefers-color-scheme: dark) {
  [data-tiny-theme='system'] {
  --ty-pagination-color: var(--ty-color-text-secondary);
  --ty-pagination-font-size: 14px;
  --ty-pagination-item-bg: #1f1f1f;
  --ty-pagination-item-radius: 2px;
  --ty-pagination-item-transition-duration: 400ms;
  --ty-pagination-item-color-ellipsis: var(--ty-color-text-quaternary);
  --ty-pagination-item-color-ellipsis-hover: var(--ty-color-primary);
  --ty-pagination-item-size-md: 32px;
  --ty-pagination-item-size-sm: 24px;
  --ty-pagination-item-gap-md: 4px;
  --ty-pagination-item-gap-sm: 0.5px;
  --ty-pagination-item-line-height-md: 30px;
  --ty-pagination-item-line-height-sm: 22px;
  --ty-pagination-item-border-md: var(--ty-color-border);
  --ty-pagination-item-color-active: var(--ty-color-primary);
  --ty-pagination-item-border-active: var(--ty-color-primary);
  --ty-pagination-item-border-hover: var(--ty-color-primary);
  --ty-pagination-item-color-hover-sm: var(--ty-color-primary);
  --ty-pagination-disabled-active-bg: #424242;
  --ty-pagination-disabled-active-color: #fff;
  --ty-pagination-disabled-bg: #2a2a2a;
  --ty-pagination-disabled-color-md: #525252;
  --ty-pagination-disabled-color-sm: #525252;
}
}