@shopify/polaris/dist/esnext/components/Pagination/Pagination.css

Shopify’s product component library

.Polaris-Pagination_1af4k{ display:inline-flex; }

@media (max-width: 30.625em), (min-width: 48.0625em) and (max-width: 47.125em){ [data-has-navigation] .Polaris-Pagination_1af4k:not(.Polaris-Pagination--plain_2z97r){ display:flex; width:100%; }
  [data-has-navigation] .Polaris-Pagination_1af4k:not(.Polaris-Pagination--plain_2z97r) .Polaris-Pagination__Button_r99lw{ flex:1 0 auto; }
  [data-has-navigation] .Polaris-Pagination_1af4k:not(.Polaris-Pagination--plain_2z97r) span{ flex:1 0 auto; }
  [data-has-navigation] .Polaris-Pagination_1af4k:not(.Polaris-Pagination--plain_2z97r) span .Polaris-Pagination__Button_r99lw{ width:100%; } }

@media (max-width: 30.625em){ .Polaris-Pagination_1af4k:not(.Polaris-Pagination--plain_2z97r){ display:flex; width:100%; }
  .Polaris-Pagination_1af4k:not(.Polaris-Pagination--plain_2z97r) .Polaris-Pagination__Button_r99lw{ flex:1 0 auto; }
  .Polaris-Pagination_1af4k:not(.Polaris-Pagination--plain_2z97r) span{ flex:1 0 auto; }
  .Polaris-Pagination_1af4k:not(.Polaris-Pagination--plain_2z97r) span .Polaris-Pagination__Button_r99lw{ width:100%; } }

.Polaris-Pagination--plain_2z97r .Polaris-Pagination__Button_r99lw{ position:relative; margin-top:-0.4rem; margin-bottom:-0.4rem; padding-top:0.8rem; padding-bottom:0.8rem; background:transparent; border:none; cursor:pointer; -webkit-appearance:none; -moz-appearance:none; appearance:none; box-shadow:none; }

.Polaris-Pagination--plain_2z97r .Polaris-Pagination__Button_r99lw:hover, .Polaris-Pagination--plain_2z97r .Polaris-Pagination__Button_r99lw:active{ background:transparent; border:none; box-shadow:none; }

.Polaris-Pagination--plain_2z97r .Polaris-Pagination__Button_r99lw:hover svg, .Polaris-Pagination--plain_2z97r .Polaris-Pagination__Button_r99lw:active svg{ fill:#212b36; }

.Polaris-Pagination--plain_2z97r .Polaris-Pagination__Button_r99lw:focus{ border:none; box-shadow:none; }

.Polaris-Pagination--plain_2z97r .Polaris-Pagination__Button_r99lw:focus::after:not(.Polaris-Pagination--newDesignLanguage_1rik8){ background:rgba(33, 43, 54, 0.1); }

.Polaris-Pagination--plain_2z97r .Polaris-Pagination__Button_r99lw:disabled{ background:transparent; border:none; box-shadow:none; }

.Polaris-Pagination--plain_2z97r .Polaris-Pagination__Button_r99lw:disabled svg{ fill:#c4cdd5; }

.Polaris-Pagination--plain_2z97r .Polaris-Pagination__Button_r99lw::after:not(.Polaris-Pagination--newDesignLanguage_1rik8){ content:''; position:absolute; top:0.4rem; right:0; left:0; display:block; height:2.8rem; border-radius:3px; -webkit-backface-visibility:hidden; backface-visibility:hidden; will-change:background; transition-property:background; transition-duration:200ms; transition-timing-function:cubic-bezier(0.64, 0, 0.35, 1); }

.Polaris-Pagination--plain_2z97r .Polaris-Pagination__PreviousButton_1aj7t{ margin-left:-0.8rem; }

.Polaris-Pagination--plain_2z97r .Polaris-Pagination__NextButton_13336{ margin-right:-0.8rem; margin-left:0.2rem; }

.Polaris-Pagination__Button_r99lw{ position:relative; z-index:10; display:inline-block; min-width:3.6rem; margin:0; padding:0.7rem 0.8rem; background:var(--p-action-secondary, linear-gradient(to bottom, white, #f9fafb)); border:0.1rem solid var(--p-border, #c4cdd5); border-radius:3px; line-height:1; color:var(--p-text, #212b36); text-align:center; cursor:pointer; -webkit-user-select:none; user-select:none; text-decoration:none; transition-property:color, background, border, box-shadow; transition-duration:200ms; transition-timing-function:cubic-bezier(0.64, 0, 0.35, 1); }

.Polaris-Pagination__Button_r99lw svg{ fill:var(--p-icon, #637381); }

.Polaris-Pagination__Button_r99lw:hover{ background:linear-gradient(to bottom, #f9fafb, #f4f6f8); border-color:#c4cdd5; }

.Polaris-Pagination__Button_r99lw:focus{ z-index:20; border-color:#5c6ac4; outline:0; box-shadow:0 0 0 1px #5c6ac4; }

.Polaris-Pagination__Button_r99lw:active{ background:linear-gradient(to bottom, #f4f6f8, #f4f6f8); border-color:#c4cdd5; box-shadow:0 0 0 0 transparent, inset 0 1px 1px 0 rgba(99, 115, 129, 0.1), inset 0 1px 4px 0 rgba(99, 115, 129, 0.2); }

.Polaris-Pagination__Button_r99lw:disabled{ background:#f4f6f8; color:#919eab; cursor:default; box-shadow:none; }

.Polaris-Pagination__Button_r99lw:disabled svg{ fill:#919eab; }

.Polaris-Pagination__PreviousButton_1aj7t{ border-top-right-radius:0; border-bottom-right-radius:0; }

.Polaris-Pagination__NextButton_13336{ margin-left:-1px; border-top-left-radius:0; border-bottom-left-radius:0; }

.Polaris-Pagination__Label_2vd36{ padding:0 0.8rem; display:flex; align-items:center; justify-content:center; }