@visa/nova-styles/components/pagination/index.css

Visa Product Design System Nova HTML+CSS library

/**
 *              © 2025-2026 Visa
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *         http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 **/
@layer components{:root,.v-alternate{--v-pagination-border-radius:var(--size-rounded-pill);--v-pagination-block-size:var(--size-scalable-32);--v-pagination-inline-size:var(--size-scalable-32);--v-pagination-padding-block:var(--size-scalable-12);--v-pagination-padding-inline:var(--size-scalable-12);--v-pagination-overflow:auto;--v-pagination-selected-background-color:var(--palette-default-surface-highlight);--v-pagination-selected-border-color:var(--palette-default-active-hover);--v-pagination-selected-border-size:0.0714285714rem;--v-pagination-selected-padding-block:calc(var(--v-pagination-padding-block) - var(--v-pagination-selected-border-size));--v-pagination-selected-padding-inline:calc(var(--v-pagination-padding-inline) - var(--v-pagination-selected-border-size));--v-pagination-overflow-padding:var(--size-scalable-8)}}@layer components{.v-pagination{overflow-x:var(--v-pagination-overflow);padding:var(--size-scalable-2);flex-wrap:wrap}.v-pagination ul{list-style:none}.v-pagination .v-button:active{--v-pagination-selected-border-color:var(--palette-default-transparent)}.v-pagination .v-button:not(.v-button-icon){--typography-font-family:var(--typography-body-2-font-family);--typography-font-size:var(--typography-body-2-font-size);--typography-font-weight:var(--typography-body-2-font-weight);--typography-letter-spacing:var(--typography-body-2-letter-spacing);--typography-line-height:var(--typography-body-2-line-height);--typography-text-decoration:var(--typography-body-2-text-decoration);--typography-text-transform:var(--typography-body-2-text-transform);font-family:var(--typography-font-family);font-size:var(--typography-font-size);font-weight:var(--typography-font-weight);letter-spacing:var(--typography-letter-spacing);line-height:var(--typography-line-height);text-decoration:var(--typography-text-decoration);text-transform:var(--typography-text-transform);--v-button-default-block-size:var(--v-pagination-block-size);--v-button-default-border-radius:var(--v-pagination-border-radius);--v-button-default-padding-block:var(--v-pagination-padding-block);--v-button-default-padding-inline:var(--v-pagination-padding-inline);inline-size:auto;min-inline-size:var(--v-pagination-inline-size)}.v-pagination .v-button:not(.v-button-icon)[aria-current=page],.v-pagination .v-button:not(.v-button-icon)[aria-current=true]{--typography-font-family:var(--typography-body-2-bold-font-family);--typography-font-size:var(--typography-body-2-bold-font-size);--typography-font-weight:var(--typography-body-2-bold-font-weight);--typography-letter-spacing:var(--typography-body-2-bold-letter-spacing);--typography-line-height:var(--typography-body-2-bold-line-height);--typography-text-decoration:var(--typography-body-2-bold-text-decoration);--typography-text-transform:var(--typography-body-2-bold-text-transform);font-family:var(--typography-font-family);font-size:var(--typography-font-size);font-weight:var(--typography-font-weight);letter-spacing:var(--typography-letter-spacing);line-height:var(--typography-line-height);text-decoration:var(--typography-text-decoration);text-transform:var(--typography-text-transform);--v-button-default-border-size:var(--v-pagination-selected-border-size);--v-button-default-border-color:var(--v-pagination-selected-border-color);--v-button-default-padding-block:var(--v-pagination-selected-padding-block);--v-button-default-padding-inline:var(--v-pagination-selected-padding-inline)}.v-pagination-overflow{padding:var(--v-pagination-overflow-padding)}}