/* Table of Contents
==================================================
# Pagination
# Alignments
# Colors */

/* # Pagination
================================================== */
.pagination { color: $color-black; }
.pagination > ul {
  display: inline-block;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}
.pagination > ul > li {
  display: inline-block;
  font-size: 14px;
  font-weight: normal;
  line-height: 1;
  margin-right: 2px;
  vertical-align: middle;
}
.pagination > ul > li > a,
.pagination > ul > li.active {
  background: $color-white;
  border-radius: 500px;
  display: inline-block;
  min-width: 8px;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
}
.pagination > ul > li > a,
.pagination > ul > li.active { padding: 10px 12px 8px 12px; }
.pagination > ul > li > a:active,
.pagination > ul > li.active {
  background: $color-primary;
  color: $color-white;
}
.pagination > ul > li > a:hover,
.pagination > ul > li > a:focus { background: $color-light-haze; }
.pagination > ul > li.pagination-icon > a {
  font-size: 18px;
  padding: 7px;
}
.pagination > ul > li.pagination-icon:first-child > a {
  padding-left: 6px;
  padding-right: 8px;
}
.pagination > ul > li.pagination-icon:last-child > a {
  padding-left: 8px;
  padding-right: 6px;
}

/* # Alignments
================================================== */
.pagination-center { text-align: center; }
.pagination-right { text-align: right; }
.pagination-left { text-align: left; }

/* # Colors
================================================== */
.pagination-dark { color: $color-white; }
.pagination-dark > ul > li > a,
.pagination-dark > ul > li.active { background: $color-light-black; }
.pagination-dark > ul > li > a:hover,
.pagination-dark > ul > li > a:focus { background: $color-dark-black; }
.pagination-light > ul > li > a,
.pagination-light > ul > li.active { background: $color-light-haze; }
.pagination-light > ul > li > a:hover,
.pagination-light > ul > li > a:focus { background: $color-haze; }
.pagination-dark > ul > li > a:active,
.pagination-dark > ul > li.active,
.pagination-light > ul > li > a:active,
.pagination-light > ul > li.active {
  background: $color-primary;
  color: $color-white;
}