// vf-pagination

@import 'package.variables.scss';
// Debug information from component's `package.json`:
// ---
/*!
 * Component: #{map-get($componentInfo, 'name')}
 * Version: #{map-get($componentInfo, 'version')}
 * Location: #{map-get($componentInfo, 'location')}
 */

@import 'vf-pagination.variables.scss';

.vf-pagination__list {
  display: flex;
  justify-content: center;
  list-style-type: none;
  padding-left: 0;
}
.vf-pagination__item {
  align-self: baseline;
  // flex: 1 1 0;
  text-align: center;
  @include padding--inline(all,map-get($vf-spacing-map, vf-spacing--200));
}

.vf-pagination__item--is-active {
  .vf-pagination__label {
    font-weight: bold;
  }
}

.vf-pagination__label,
.vf-pagination__link{
  @include set-type(text-body--3, $custom-margin-bottom: 0);

  color: var(--vf-color__text--primary);
  display: block;
  padding: 4px 8px;
  text-decoration: none;
}

.vf-pagination__link {
  @include inline-link;
  color: var(--vf-color__link);
}

.vf-pagination__link--visited, .vf-pagination__link:visited { color: var(--vf-color__link--visited); }

.vf-pagination__link--hover,  .vf-pagination__link:hover { color: var(--vf-color__link--hover); }

.vf-pagination__item--jump-back {
  border-right: 1px solid color(grey--lightest);
}

.vf-pagination__item--jump-forward {
  border-left: 1px solid color(grey--lightest);
}

.disabled {
  color: var(--vf-color__text--primary);
  cursor: not-allowed;
  pointer-events: all;
}

[disabled] {
  color: var(--vf-color__text--primary);
  cursor: not-allowed;
  pointer-events: all;
}