infima/styles/components/pagination-nav.css

A UI framework for content-centric websites.

:root {
  --ifm-pagination-nav-border-radius: var(--ifm-global-radius);
  --ifm-pagination-nav-color-hover: var(--ifm-color-primary);
}

.pagination-nav {
  display: flex;

  & .pagination-nav__item {
    display: flex;
    flex-basis: 50%;
    flex-grow: 1;
    max-width: 50%;
  }

  & .pagination-nav__item--next {
    text-align: right;
  }

  & .pagination-nav__item + .pagination-nav__item {
    margin-left: var(--ifm-spacing-horizontal);
  }

  & .pagination-nav__link {
    border-color: var(--ifm-color-emphasis-300);
    border-radius: var(--ifm-pagination-nav-border-radius);
    border-style: solid;
    border-width: 1px;
    display: block;
    flex-grow: 1;
    padding: var(--ifm-global-spacing);
    text-decoration: none;

    &:hover {
      border-color: var(--ifm-pagination-nav-color-hover);
    }
  }

  & .pagination-nav__link--label {
    font-size: var(--ifm-h4-font-size);
    line-height: var(--ifm-heading-line-height);
    font-weight: var(--ifm-heading-font-weight);
    margin-bottom: 0;
    margin-top: 0;
    word-break: break-word;
    
  }

  & .pagination-nav__link--sublabel {
    font-size: var(--ifm-h5-font-size);
    line-height: var(--ifm-heading-line-height);
    color: var(--ifm-color-content-secondary);
    font-weight: var(--ifm-font-weight-semibold);
    margin-bottom: 0.25rem;
  }
}