.pagination {
  list-style-type: none;
  @apply mb-20 h-40 text-center flex justify-center items-center;
}

.page, .break-me {
  line-height: normal;
  @apply text-grey-4 text-base inline-flex justify-center items-center mr-20 hidden;
}

.page a {
  min-width: 30px;
  height: 30px;
  @apply w-auto;
}

.page:not(.active):hover {
  @apply text-black bg-grey-2 rounded-20 cursor-pointer;
}

.page.active {
  @apply text-white bg-teal rounded-20 outline-none text-center;
}

.previous {
  @apply absolute left-0 ml-15;
}

.next a, .previous a {
  @apply flex items-center text-teal font-bold text-sm;
}

.disabled a,
.disabled a:hover {
  @apply text-grey-4 font-regular cursor-default opacity-60;
}

.page.active a {
  @apply cursor-default opacity-100 flex justify-center items-center;
}

.page a:link, .page a:visited {
  @apply text-grey-dark flex justify-center items-center;
}

.page a:focus,
.page.active a:focus,
.previous:not(.disabled) a:focus,
.next:not(.disabled) a:focus {
  @apply outline-none;
}

.next, .previous {
  @apply mt-20;
}

.next {
  @apply absolute right-0 mr-15;
}

.next:not(.disabled):hover, .previous:not(.disabled):hover {
  @apply opacity-80;
}

@screen lg {
  .pagination {
    @apply h-auto;
  }

  .next, .previous {
    @apply mt-0;
  }

  .next a, .previous a {
    @apply text-base;
  }

  .previous {
    @apply ml-0;
  }

  .next {
    @apply mr-20;
  }

  .page, .break-me {
    @apply inline-flex;
  }
}