/**
* Everything about pagination
*/

.paginator {
  list-style: none;
  display: flex;
  margin-top: 3rem;
  padding:0;
  a, span {
    display: block;
    padding: 4px 15px;
    color: $grayColor;
    border-radius: $globalRadius;
    transition: background $globalMediumEaseTime ease;
    will-change: background;
    background: $lightGrayColor;

    i {
      vertical-align: middle;
    }
  }

  .item {
    margin: 0 10px 0 0;
    &.current a, &.current span {
      background: $actionColor;
      color: #fff;
    }
    &:last-child {
      margin: 0;
    }
  }
}

// hover states only for non touch devices
html:not(.touch) {
  .paginator {
    a {
      background: transparent;
      &:hover {
        background: $lightGrayColor;
      }
      &:active {
        background: darken($lightGrayColor, 10%);
      }
    }
  }
}

@media #{$mediaSmall} {
  .paginator {
    width: 100%;
    margin-top:2rem;
    .prev ~ .next {
      margin-left:10px;
    }
    .item {
      // add a little space between next and prev
      margin: 0 10px 0 0;
      &.arrow {
        width: 100%;
        text-align: center;
        display: block
      }

      &:not(.arrow) {
        display: none;
      }
    }
  }
}