{"version":3,"file":"pagination.module.mjs","names":[],"sources":["../../../../package/common/pagination/pagination.module.pcss"],"sourcesContent":[".pagination {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--pagination-gap, 4px);\n\n  &-item,\n  &-control {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    min-width: var(--pagination-size, 36px);\n    height: var(--pagination-size, 36px);\n    padding: 0 6px;\n    border: 1px solid var(--border-color);\n    border-radius: var(--default-border-radius);\n    background: transparent;\n    color: var(--text-color);\n    font: inherit;\n    font-size: var(--default-font-size);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    transition:\n      background-color 0.15s,\n      color 0.15s,\n      border-color 0.15s;\n\n    &:hover:not(:disabled) {\n      background: var(--background-accent);\n    }\n\n    &:focus-visible {\n      outline: var(--focus-border-color, var(--primary-color)) solid 2px;\n      outline-offset: -2px;\n    }\n\n    &:disabled {\n      cursor: default;\n      opacity: 0.5;\n    }\n  }\n\n  /* Ties on specificity with the shared `&-item` rule above and wins on source order, so the\n     active page keeps its fill through hover too rather than falling back to the hover surface. */\n  &-item-active {\n    border-color: var(--pagination-active-background, var(--primary-color));\n    background: var(--pagination-active-background, var(--primary-color));\n\n    /* Must follow the shorthand above, which resets background-image. */\n    background-image: var(--primary-gradient, none);\n    color: var(--pagination-active-color, var(--text-on-primary));\n\n    &:hover:not(:disabled) {\n      background: var(--pagination-active-background, var(--primary-color));\n      background-image: var(--primary-gradient, none);\n    }\n\n    /* The active item sits on the primary fill, where the default primary-color focus ring is\n       invisible — same swap OptionPicker makes for its selected option. */\n    &:focus-visible {\n      outline-color: var(--pagination-active-color, var(--text-on-primary));\n    }\n  }\n\n  &-ellipsis {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: var(--pagination-size, 36px);\n    height: var(--pagination-size, 36px);\n    color: var(--text-dark);\n    user-select: none;\n  }\n}\n"],"mappings":""}