Fix pagination

sass/components/pagination.sass

@@ -1,37 +1,150 @@
-.pagination
+// $size: 0.875rem
+
+.pagination,
+.pagination-list
   align-items: center
   display: flex
   justify-content: center
   text-align: center
-  a
-    display: block
-    min-width: 32px
-    padding: 3px 8px
-  span
+
+.pagination-previous,
+.pagination-next,
+.pagination-link,
+.pagination-ellipsis
+  +control
+  +unselectable
+  font-size: 0.875rem
+  padding-left: 0.5em
+  padding-right: 0.5em
+  justify-content: center
+  text-align: center
+
+.pagination-previous,
+.pagination-next,
+.pagination-link
+  border: 1px solid $border
+  min-width: 2.5em
+  &:hover
+    border-color: $link
+    color: $text-strong
+  &:focus
+    border-color: $link
+  &:active
+    background-color: $background
+    box-shadow: inset 0 1px 2px rgba($black, 0.2)
+  &[disabled],
+  &.is-disabled
+    background: $border
     color: $text-light
-    display: block
-    margin: 0 4px
+    opacity: 0.5
+    pointer-events: none
+
+.pagination-previous,
+.pagination-next
+  padding-left: 0.75em
+  padding-right: 0.75em
+
+.pagination-link
+  &.is-current
+    background-color: $link
+    border-color: $link
+    color: $link-invert
+
+.pagination-ellipsis
+  color: $text-light
+  pointer-events: none
+
+.pagination-list
   li
-    margin: 0 2px
-  ul
-    align-items: center
-    display: flex
-    flex-grow: 1
-    flex-shrink: 0
-    justify-content: center
-  // Responsiveness
-  +mobile
+    &:not(:first-child)
+      margin-left: 0.375rem
+
++mobile
+  .pagination
     flex-wrap: wrap
-    & > a
-      width: calc(50% - 5px)
-      &:not(:first-child)
-        margin-left: 10px
+  .pagination-previous,
+  .pagination-next
+    flex-grow: 1
+    flex-shrink: 1
+    width: calc(50% - 0.375rem)
+  .pagination-next
+    margin-left: 0.75rem
+  .pagination-list
+    margin-top: 0.75rem
     li
       flex-grow: 1
-      flex-shrink: 0
-    ul
-      margin-top: 10px
-  +tablet
-    & > a
-      &:not(:first-child)
+      flex-shrink: 1
+
++tablet
+  .pagination-list
+    flex-grow: 1
+    flex-shrink: 1
+    justify-content: flex-start
+    order: 1
+  .pagination-previous,
+  .pagination-next
+    margin-left: 0.75rem
+  .pagination-previous
+    order: 2
+  .pagination-next
+    order: 3
+  .pagination
+    justify-content: space-between
+    &.is-centered
+      .pagination-previous
+        margin-left: 0
         order: 1
+      .pagination-list
+        justify-content: center
+        order: 2
+      .pagination-next
+        order: 3
+    &.is-right
+      .pagination-previous
+        margin-left: 0
+        order: 1
+      .pagination-next
+        order: 2
+        margin-right: 0.75rem
+      .pagination-list
+        justify-content: flex-end
+        order: 3
+
+
+// .pagination
+//   align-items: center
+//   display: flex
+//   justify-content: center
+//   text-align: center
+//   a
+//     display: block
+//     min-width: 32px
+//     padding: 3px 8px
+//   span
+//     color: $text-light
+//     display: block
+//     margin: 0 4px
+//   li
+//     margin: 0 2px
+//   ul
+//     align-items: center
+//     display: flex
+//     flex-grow: 1
+//     flex-shrink: 0
+//     justify-content: center
+//   // Responsiveness
+//   +mobile
+//     flex-wrap: wrap
+//     & > a
+//       width: calc(50% - 5px)
+//       &:not(:first-child)
+//         margin-left: 10px
+//     li
+//       flex-grow: 1
+//       flex-shrink: 0
+//     ul
+//       margin-top: 10px
+//   +tablet
+//     & > a
+//       &:not(:first-child)
+//         order: 1