.pf-c-pagination {
  // Base
  --pf-c-pagination--child--MarginRight: var(--pf-global--spacer--lg);
  --pf-c-pagination--m-compact--child--MarginRight: var(--pf-global--spacer--sm);

  // Dropdown
  --pf-c-pagination--c-options-menu__toggle--FontSize: var(--pf-global--FontSize--sm);
  --pf-c-pagination__menu-text--PaddingLeft: var(--pf-global--spacer--xs);
  --pf-c-pagination__menu-text--FontSize: var(--pf-global--FontSize--sm);
  --pf-c-pagination__menu-text--Color: var(--pf-global--Color--200);

  // Nav
  --pf-c-pagination__nav--c-button--PaddingLeft: var(--pf-global--spacer--sm);
  --pf-c-pagination__nav--c-button--PaddingRight: var(--pf-global--spacer--sm);
  --pf-c-pagination__nav--c-button--FontSize: var(--pf-global--FontSize--md);
  --pf-c-pagination--m-compact__nav--c-button--MarginLeft: var(--pf-global--spacer--md);

  // Nav page select
  --pf-c-pagination__nav-page-select--FontSize: var(--pf-global--FontSize--sm);
  --pf-c-pagination__nav-page-select--PaddingLeft: var(--pf-global--spacer--md);
  --pf-c-pagination__nav-page-select--PaddingRight: var(--pf-global--spacer--md);
  --pf-c-pagination__nav-page-select--child--MarginRight: var(--pf-global--spacer--xs);
  --pf-c-pagination__nav-page-select--c-form-control--width-base: 3.5ch;
  --pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;
  --pf-c-pagination__nav-page-select--c-form-control--Width: calc(var(--pf-c-pagination__nav-page-select--c-form-control--width-base) + (var(--pf-c-pagination__nav-page-select--c-form-control--width-chars) * 1ch));

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;

  > *:not(:last-child):not(.pf-c-pagination__total-items) {
    margin-right: var(--pf-c-pagination--child--MarginRight);
  }

  // Top pagination
  &:not(.pf-m-footer) {
    .pf-c-options-menu,
    .pf-c-pagination__nav {
      display: none;
      visibility: hidden;

      @media screen and (min-width: $pf-global--breakpoint--md) {
        display: flex;
        visibility: visible;
      }
    }
  }

  &.pf-m-footer {
    .pf-c-options-menu {
      display: none;
      visibility: hidden;

      @media screen and (min-width: $pf-global--breakpoint--md) {
        display: flex;
        visibility: visible;
      }
    }
  }

  .pf-c-options-menu__toggle {
    font-size: var(--pf-c-pagination--c-options-menu__toggle--FontSize);
  }

  &.pf-m-compact {
    --pf-c-pagination--child--MarginRight: var(--pf-c-pagination--m-compact--child--MarginRight);
  }
}

// Nav
.pf-c-pagination__nav {
  display: inline-flex;
  justify-content: flex-end;

  .pf-c-button {
    padding-right: var(--pf-c-pagination__nav--c-button--PaddingRight);
    padding-left: var(--pf-c-pagination__nav--c-button--PaddingLeft);
    font-size: var(--pf-c-pagination__nav--c-button--FontSize);

    .pf-c-pagination.pf-m-compact & {
      // stylelint-disable-next-line
      + .pf-c-button {
        margin-left: var(--pf-c-pagination--m-compact__nav--c-button--MarginLeft);
      }
    }
  }
}

// Nav page element
.pf-c-pagination__nav-page-select {
  display: flex;
  align-items: center;
  padding-right: var(--pf-c-pagination__nav-page-select--PaddingRight);
  padding-left: var(--pf-c-pagination__nav-page-select--PaddingLeft);

  > * {
    font-size: var(--pf-c-pagination__nav-page-select--FontSize);
    white-space: nowrap;

    &:not(:last-child) {
      margin-right: var(--pf-c-pagination__nav-page-select--child--MarginRight);
    }
  }

  .pf-c-form-control {
    width: var(--pf-c-pagination__nav-page-select--c-form-control--Width);
  }
}

// Mobile element for total-items items
.pf-c-pagination__total-items {
  @media screen and (min-width: $pf-global--breakpoint--md) {
    display: none;
    visibility: hidden;
  }
}

// Dropdown elements
.pf-c-pagination__menu-text {
  padding-left: var(--pf-c-pagination__menu-text--PaddingLeft);
  font-size: var(--pf-c-pagination__menu-text--FontSize);
  color: var(--pf-c-pagination__menu-text--Color);
}
