.pager__item {
  padding-top: 0.25rem;

  &--ellipsis,
  a {
    width: 1.5rem;
    height: 1.5rem;

    @include media-breakpoint-up(sm) {
      width: 2rem;
      height: 2rem;
    }
  }

  a {
    &:hover {
      background-color: $gray-200;
    }
  }

  svg {
    width: 100%;
    height: 100%;

    &.flipped {
      transform: rotate(180deg);
    }
  }

  &.is-active {
    padding-top: 0;

    a {
      width: 2rem;
      height: 2rem;
    }
  }

  @include media-breakpoint-up(sm) {
    padding-top: 0;

    &--ellipsis,
    a {
      width: 2rem;
      height: 2rem;
    }
  }
}