@if $css-variable-enabled {
  $pagination-item-border-radius: var(--pagination-item-border-radius);
  $pagination-item-border-width: var(--pagination-item-border-width);
  $pagination-item-margin: var(--pagination-item-margin);
  $pagination-item-padding: var(--pagination-item-padding);
  $primary-transition: var(--primary-transition);
}

.#{$prefix}pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;

  & > a:nth-child(2) {
    order: 3;
  }

  @include small {
    margin-bottom: 20px;

    & > a:nth-child(1) {
      order: 2;
      flex-grow: 1;
      flex-basis: 0;
    }
    & > a:nth-child(2) {
      order: 3;
      flex-grow: 1;
      flex-basis: 0;
    }
  }

  & > .#{$prefix}items {
    display: inline-flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0;

    @include small {
      flex-basis: 100%;
    }

    > li {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin: $pagination-item-margin;

      > a[item], > a.#{$prefix}item {
        color: var(--pagination-item-text-color);
        display: inline-flex;
        border-style: solid;
        border-color: var(--pagination-item-border-color);
        background-color: var(--pagination-item-bg-color);
        cursor: pointer;
        user-select: none;
        padding: $pagination-item-padding;
        border-width: $pagination-item-border-width;
        border-radius: $pagination-item-border-radius;
        transition: $primary-transition;

        &:hover, &:focus {
          border-color: var(--pagination-item-hovered-border-color);
        }

        &[active], &.#{$prefix}active {
          background-color: var(--pagination-item-active-bg-color);
          color: var(--pagination-item-active-text-color);
          border-color: var(--pagination-item-active-border-color);
          cursor: default;
        }
      }
    }
  }
}