// // Pagination // —————————————-

.pagination {

display: inline-block;
padding-left: 0;
margin: 0 ($pagination-gutter / 2 * -1);

> li {
  display: inline;

  > a {
    float: left;
    display: block;
    width: $pagination-width;
    height: $pagination-height;
    margin: 0 ($pagination-gutter / 2);
    border-radius: 50%;
    background-color: $pagination-bgr-color;
    border: 1px solid $pagination-border-color;
    @include transition(all $transition-time-out $transition-function);
  }
}

> li > a {

  &.focus,
  &:focus {
    background-color: hsv-darken($pagination-bgr-color, 21%, true);
    border-color: hsv-darken($pagination-border-color, 21%, true);
    outline: 0;
  }

  &.hover,
  &:hover {
    background-color: hsv-darken($pagination-bgr-color, 7%, true);
    border-color: hsv-darken($pagination-border-color, 7%, true);
    @include transition($transition-time-in, '-duration');
  }

  &.active,
  &:active {
    background-color: hsv-darken($pagination-bgr-color, 15%, true);
    border-color: hsv-darken($pagination-border-color, 15%, true);
  }

}

> .active > a {
  background-color: $pagination-active-bgr-color;
  border-color: $pagination-active-border-color;
  overflow: hidden;

  &:before {
    content: url('data:image/gif;base64,R0lGODdhDAAMAKUiAOYgheYhhuYihuYih+Yjh+YjiOYkh+YkiOYliOYlieYmiOYmieYniecniecniuYoiucoiecoiuYpiucpiucqiucqi+cri+csjOctjOcujecvjecvjucwjugxj+gyj+g0kOg1kOg1kf///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////ywAAAAADAAMAAAGXUAE4lAYBACAAOFwEB4IRqSS6YQGroKls3gNZJsJptWrXSzEAnKT8XgQ3oOvgiGpVN54A4JuuVzwTXMPFhgaGwVMCQ0QERQYHB4eiQ0RExQWGR0fIIkOlRWYHiAhQQA7');
    line-height: $pagination-height;
    vertical-align: super;
  }

  &.focus,
  &:focus {
    background-color: hsv-darken($pagination-active-bgr-color, 21%, true);
    border-color: hsv-darken($pagination-active-border-color, 21%, true);
  }

  &.hover,
  &:hover {
    background-color: hsv-darken($pagination-active-bgr-color, 7%, true);
    border-color: hsv-darken($pagination-active-border-color, 7%, true);
  }

  &.active,
  &:active {
    background-color: hsv-darken($pagination-active-bgr-color, 15%, true);
    border-color: hsv-darken($pagination-active-border-color, 15%, true);
  }
}

> .disabled {
  > a,
  > a:hover,
  > a:focus,
  > a:active {
    background-color: $pagination-disabled-bgr-color;
    border-color: $pagination-disabled-border-color;
    cursor: not-allowed;
  }
}

}

.pagination-small {

@include pagination-variant($pagination-width-small, $pagination-height-small, $pagination-gutter-small);

}