// // Pager // —————————————-

.pager {

border-radius: 3em;
@include transition(all $transition-time-out $transition-function);
background: $pager-background-color;
background-image: none;
border: 1px solid $pager-border-color;
color: $pager-text-color;
cursor: pointer;
display: inline-block;
font-weight: normal;
font-size: $font-size-regular; // prevent font-size inherit in other modules / scopes
line-height: $line-height-regular; // prevent line-height inherit in other modules / scopes
padding: $button-padding;
text-align: center;
vertical-align: bottom;
white-space: nowrap;
text-decoration: none;

&.right {
  float: right;
}

&.left {
  float: left;
}

> .icon {
  padding-right: $button-icon-indent;
  margin-left: -$button-icon-indent / 2;

  &.right {
    padding-left: $button-icon-indent;
    padding-right: 0;
    margin-left: 0;
    margin-right: -$button-icon-indent / 2;
  }
}

&.focus,
&:focus {
  text-decoration: none;
  @include tab-focus();
}

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

&.active,
&:active {
  text-decoration: none;
  background-color: hsv-darken($pager-background-color, 15%, true);
  border-color: hsv-darken($pager-border-color, 15%, true);
}

&.disabled,
&[disabled] {
  cursor: not-allowed;
  background: $pager-disabled-bgr-color;
  border-color: $pager-disabled-border-color;
  color: $pager-disabled-text-color;
}

}

.pager-small {

font-size: $pager-small-font-size;
padding: $pager-small-padding;

}

.pager-large {

font-size: $pager-large-font-size;
padding: $pager-large-padding;

}

.pager-icon {

padding: $pager-padding-minimal;
padding-left: 0;
padding-right: 0;
width: 36px;

&.pager-small {
  width: 32px;
}

&.pager-large {
  width: 48px;
  height: 48px;

  .icon {
    font-size: 36px;
    padding: 1px 0 0 2px;
  }

}

.icon {
  padding: 0;
  margin-left: 0;
  margin-right: 0;

}

}

.pager + .pager {

margin-left: building-units(2);

}

.pager-minimal {

padding: $pager-padding-minimal;

}

.pager-block {

width: 100%;

}

.pager-clean {

border-color: transparent;

&.hover,
&:hover {
  text-decoration: none;
  border-color: transparent;
}

&.active,
&:active {
  text-decoration: none;
  border-color: transparent;
}

}