{"version":3,"file":"pagination.css.cjs","names":[],"sources":["../../../src/content/pagination/pagination.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: flex;\n    gap: var(--size-1);\n    align-items: center;\n  }\n\n  .pagination {\n    display: flex;\n    gap: var(--pagination-gap, var(--size-1));\n    align-items: center;\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n\n  li {\n    display: contents;\n  }\n\n  button {\n    all: unset;\n    box-sizing: border-box;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: var(--pagination-item-size, var(--size-9));\n    height: var(--pagination-item-size, var(--size-9));\n    min-height: var(--_touch-target);\n    padding: 0 var(--size-2);\n    font-size: var(--_font-size, var(--text-sm));\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-700);\n    cursor: pointer;\n    user-select: none;\n    border: var(--border) solid transparent;\n    border-radius: var(--pagination-radius, var(--rounded-lg));\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast),\n      border-color var(--transition-fast);\n  }\n\n  /* Default (ghost-like) behavior unless variant is specified */\n  :host(:not([variant])) button,\n  :host([variant='ghost']) button {\n    color: var(--color-contrast-700);\n    background: transparent;\n    border-color: transparent;\n    border-width: 0;\n  }\n\n  :host(:not([variant])) button:hover:not(:disabled, [aria-current='page']),\n  :host([variant='ghost']) button:hover:not(:disabled, [aria-current='page']) {\n    background: var(--_theme-backdrop);\n  }\n\n  :host([variant='solid']) button {\n    color: var(--_theme-contrast);\n    background: var(--_theme-base);\n    border-color: var(--_theme-base);\n  }\n\n  :host([variant='solid']) button:hover:not(:disabled, [aria-current='page']) {\n    background: var(--_theme-focus);\n  }\n\n  :host([variant='flat']) button {\n    color: var(--_theme-base);\n    background: color-mix(in oklch, var(--_theme-backdrop) 8%, var(--color-contrast-100));\n    border-color: color-mix(in oklch, var(--_theme-focus) 20%, transparent);\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  :host([variant='flat']) button:hover:not(:disabled, [aria-current='page']) {\n    color: var(--_theme-contrast);\n    background: var(--_theme-focus);\n  }\n\n  :host([variant='bordered']) button {\n    color: var(--_theme-base);\n    background: var(--_theme-backdrop);\n    border-color: var(--_theme-border);\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  :host([variant='bordered']) button:hover:not(:disabled, [aria-current='page']) {\n    color: var(--_theme-contrast);\n    background: var(--_theme-focus);\n    border-color: var(--_theme-focus);\n  }\n\n  :host([variant='outline']) button {\n    color: var(--_theme-base);\n    background: transparent;\n    border-color: var(--_theme-base);\n  }\n\n  :host([variant='outline']) button:hover:not(:disabled, [aria-current='page']) {\n    background: var(--_theme-backdrop);\n    border-color: var(--_theme-focus);\n  }\n\n  :host([variant='text']) button {\n    color: var(--_theme-base);\n    background: transparent;\n    border-color: transparent;\n    border-width: 0;\n  }\n\n  :host([variant='text']) button:hover:not(:disabled, [aria-current='page']) {\n    color: var(--_theme-focus);\n    background: transparent;\n  }\n\n  :host([variant='frost']) button {\n    color: var(--_theme-content);\n    background: color-mix(in oklch, var(--_theme-backdrop) 45%, transparent);\n    border-color: color-mix(in oklch, var(--_theme-border) 45%, transparent);\n    backdrop-filter: blur(var(--blur-xl)) saturate(200%);\n  }\n\n  :host([variant='frost']) button:hover:not(:disabled, [aria-current='page']) {\n    background: color-mix(in oklch, var(--_theme-backdrop) 65%, transparent);\n    border-color: color-mix(in oklch, var(--_theme-focus) 55%, transparent);\n  }\n\n  :host([variant='glass']) button {\n    color: var(--_theme-content);\n    background: color-mix(in oklch, var(--color-canvas) 70%, transparent);\n    border-color: color-mix(in oklch, var(--_theme-border) 40%, transparent);\n    backdrop-filter: blur(var(--blur-md)) saturate(140%);\n  }\n\n  :host([variant='glass']) button:hover:not(:disabled, [aria-current='page']) {\n    background: color-mix(in oklch, var(--color-canvas) 55%, transparent);\n    border-color: color-mix(in oklch, var(--_theme-border) 45%, transparent);\n  }\n\n  button:hover:not(:disabled, [aria-current='page']) {\n    background: var(--color-contrast-100);\n  }\n\n  button:focus-visible {\n    outline: var(--border-2) solid var(--_theme-base, var(--color-contrast-500));\n    outline-offset: var(--border-2);\n  }\n\n  /* Selected page styling - applies to all variants */\n  button[aria-current='page'] {\n    font-weight: var(--font-bold);\n    color: var(--_theme-contrast, var(--color-canvas));\n    cursor: default;\n    background: var(--_theme-base, var(--color-contrast-800));\n    border-color: var(--_theme-base, var(--color-contrast-800));\n  }\n\n  :host([variant='ghost']) button[aria-current='page'],\n  :host(:not([variant])) button[aria-current='page'] {\n    color: var(--_theme-contrast);\n    background: var(--_theme-focus);\n    border-color: var(--_theme-focus);\n  }\n\n  :host([variant='solid']) button[aria-current='page'] {\n    background: var(--_theme-focus);\n    border-color: var(--_theme-focus);\n  }\n\n  :host([variant='flat']) button[aria-current='page'] {\n    color: var(--_theme-contrast);\n    background: var(--_theme-base);\n    border-color: var(--_theme-base);\n  }\n\n  :host([variant='bordered']) button[aria-current='page'] {\n    color: var(--_theme-contrast);\n    background: var(--_theme-focus);\n    border-color: var(--_theme-focus);\n  }\n\n  :host([variant='outline']) button[aria-current='page'] {\n    color: var(--_theme-contrast);\n    background: var(--_theme-base);\n    border-color: var(--_theme-base);\n  }\n\n  :host([variant='text']) button[aria-current='page'] {\n    color: var(--_theme-focus);\n    text-decoration-line: underline;\n    text-decoration-thickness: 2px;\n    text-underline-offset: 4px;\n  }\n\n  :host([variant='frost']) button[aria-current='page'] {\n    color: var(--_theme-contrast);\n    background: color-mix(in oklch, var(--_theme-base) 70%, transparent);\n    border-color: var(--_theme-base);\n  }\n\n  :host([variant='glass']) button[aria-current='page'] {\n    color: var(--_theme-contrast);\n    background: color-mix(in oklch, var(--color-canvas) 90%, transparent);\n    border-color: var(--_theme-base);\n  }\n\n  button:disabled {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n\n  .ellipsis {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: var(--pagination-item-size, var(--size-9));\n    height: var(--pagination-item-size, var(--size-9));\n    font-size: var(--_font-size, var(--text-sm));\n    color: var(--color-contrast-400);\n    cursor: default;\n  }\n}\n\n@layer refine.utilities {\n  :host([size='sm']) {\n    --pagination-item-size: var(--size-7);\n    --pagination-gap: var(--size-0_5);\n    --_font-size: var(--text-xs);\n  }\n\n  :host([size='lg']) {\n    --pagination-item-size: var(--size-11);\n    --_font-size: var(--text-base);\n  }\n}\n"],"mappings":""}