@import "settings.global";
@import "components.buttons";

@mixin pagination {
  display: block;
  width: $pagination-width;
  padding: $pagination-padding;
  text-align: center;
  font-size: $pagination-font-size;
}

@mixin pagination__controls {
  display: inline-block;
  text-align: center;
}

@mixin pagination__controls--backward {
  float: left;
  text-align: left;
}

@mixin pagination__controls--forward {
  float: right;
  text-align: right;
}

@mixin pagination__control($color: $pagination-control-color) {
  @include button;
  @include button--ghost($color);
  @include button--rounded;
  min-width: 2.4em;
}

@mixin pagination__page {
  @include pagination__control($pagination-page-color);
}

@mixin pagination__page--current {
  background-color: $pagination-page-current-background-color;
  color: $pagination-page-current-color;
}

@mixin pagination__ellipsis {
  padding: $pagination-ellipsis-padding;
}