.pagination {
  margin-right: 1em;
  text-align: right;

  form {
    display: block;
    width: auto;

    input {
      width: 5em;
    }
  }

  a {
    &:active {
      .icon {
        position: relative;
        top: 1px;
      }
    }

    &:focus,
    &:hover {
      opacity: 1;
    }
  }

  li {
    display: inline-block;
    vertical-align: middle;

    &:not(:first-child) {
      margin-left: .5em;
    }

    input {
      [type='number'] {
        width: 5em;
      }
    }
  }

  .icon {
    color: #35b2e8;
    display: block;
    height: 2em;
    width: 2em;
  }

  .pagination-disabled {
    .icon {
      color: #666;
    }
  }

  .pagination-first,
  .pagination-previous {
    .icon {
      transform: rotate(180deg);
    }
  }

  .pagination-first > *,
  .pagination-previous > *,
  .pagination-next > *,
  .pagination-last > * {
    color: transparent;
    display: inline-block;
    opacity: .7;
    vertical-align: middle;
  }
}
