@import 'main';

$pagination_item_size: 24px;

.pagination {
  @include middle();

  .arrow-icon {
    font-size: $pagination_item_size;
    color: $color_dark;
    cursor: pointer;
  }

  .arrow-link {
    font-size: 0;
    display: inline-block;
    vertical-align: middle;
    &, &:link, &:visited {
      text-decoration: none;
    }
  }

  .item-link {
    text-decoration: none;
  }
}

.item, .ellipsis {
  height: $pagination_item_size;
  line-height: $pagination_item_size;
  text-align: center;
  color: $color_grey;
  @include no-text-selection();
}

.item {
  width: $pagination_item_size;
  cursor: pointer;
  margin: 0 2px;
  @include transition();

  &, a {
    text-decoration: none;
    color: $color_grey;
  }

  &:first-of-type {
    margin-left: 0;
  }

  &:last-of-type {
    margin-right: 0;
  }

  &:hover {
    &, a {
      color: $color_primary;

    }
  }

  &.active {
    &, a {
      color: $color_default;
    }
  }
}

.ellipsis {
  margin: 0 8px;
  font-size: $default_font_size;
}

.prev {
  margin-right: 8px;
}

.next {
  @include middle();
  margin-left: 8px;

  .ellipsis {
    margin-left: 0;
  }
}

.page-input {
  width: 50px;
  margin: 0 7px 0 15px;
}