.pagination {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.pagination a,
.pagination .current,
.pagination .gap {
  padding: var(--spacing-sm) var(--spacing-md);
  min-width: calc(var(--spacing-md) + 1ch + var(--spacing-md));
}

.pagination a:hover,
.pagination a:focus {
  background-color: var(--color-light);
}

.pagination .current {
  font-weight: var(--font-weight-heavy);
}

.pagination .gap {
  color: var(--color-dark);
}

.pagination > * {
  align-items: center;
  border: var(--border-sm) solid var(--color-darkener);
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.pagination > *:first-child {
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}

.pagination > *:last-child {
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

.pagination > *:not(:first-child) {
  border-left-width: 0;
}

/* .pagination .first,
.pagination .prev,
.pagination .page,
.pagination .next,
.pagination .last */

/* .pagination a, .pagination span.current, .pagination span.gap {
  float: left;
  padding: 0 14px;
  line-height: 38px;
  text-decoration: none;
  background-color: white;
  border: 1px solid #DDD;
  border-left-width: 0;
}

.pagination {
    border-left: 1px solid #ddd;
    .first{
        padding : 0;
        float: none;
        border: none;
    }
    .prev {
        padding : 0;
        float: none;
        border: none;
    }
    .page{
        padding : 0;
        float: none;
        border: none;
    }
    .next{
        padding : 0;
        float: none;
        border: none;
    }
    .last{
        padding : 0;
        float: none;
        border: none;
    }
} */