/**
 * @file
 * Visual styles for pager.
 */

.pager__items {
  clear: both;
  text-align: center;
}
.pager__item a{
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
.pager__item.is-active a{
  font-weight: bold;
}

.pager__item a{
  @apply mx-3 rounded-full w-10 h-10 text-primary-black border border-solid border-brand-grey inline-block transition-all duration-150
}

.pager__item.is-active a{
  @apply bg-primary-blue rounded-full w-10 h-10 text-white
}

.pager__item:hover a{
  @apply rounded-full w-10 h-10 border-brand-blue bg-brand-blue text-white
}

.pager__item.pager__item--next a,
.pager__item.pager__item--last a,
.pager__item.pager__item--previous a,
.pager__item.pager__item--first a {
  @apply w-auto h-auto px-3 text-primary-black
}

.pager__item.pager__item--next a:hover,
.pager__item.pager__item--last a:hover,
.pager__item.pager__item--previous a:hover,
.pager__item.pager__item--first a:hover {
  @apply bg-brand-blue text-white
}

.pager__items {
  @apply flex items-center min-w-max mx-auto max-w-fit
}

nav.pager {
  @apply pt-8 pb-8
}