Simplify .PaginationPageButton

Use `classes` to extend, not obliterate, component styles, obviating
the need to use complex mixins.

dev-server/ui-playground/components/ButtonPatterns.js

@@ -90,17 +90,17 @@ export default function ButtonPatterns() {
 
         <Library.Example title="Page numbers">
           <Library.Demo withSource style={{ backgroundColor: '#ececec' }}>
-            <LabeledButton className="PaginationPageButton" variant="dark">
+            <LabeledButton classes="PaginationPageButton" variant="dark">
               9
             </LabeledButton>
             <LabeledButton
-              className="PaginationPageButton"
+              classes="PaginationPageButton"
               variant="dark"
               pressed
             >
               10
             </LabeledButton>
-            <LabeledButton className="PaginationPageButton" variant="dark">
+            <LabeledButton classes="PaginationPageButton" variant="dark">
               11
             </LabeledButton>
           </Library.Demo>
@@ -109,14 +109,14 @@ export default function ButtonPatterns() {
         <Library.Example title="Navigation buttons">
           <Library.Demo withSource style={{ backgroundColor: '#ececec' }}>
             <LabeledButton
-              className="PaginationPageButton"
+              classes="PaginationPageButton"
               icon="arrow-left"
               variant="dark"
             >
               Prev
             </LabeledButton>
             <LabeledButton
-              className="PaginationPageButton"
+              classes="PaginationPageButton"
               icon="arrow-right"
               iconPosition="right"
               variant="dark"

src/sidebar/components/PaginationNavigation.js

@@ -36,7 +36,7 @@ function PaginationNavigation({ currentPage, onChangePage, totalPages }) {
       <div className="PaginationNavigation__relative PaginationNavigation__prev">
         {hasPreviousPage && (
           <LabeledButton
-            className="PaginationPageButton"
+            classes="PaginationPageButton"
             icon="arrow-left"
             title="Go to previous page"
             onClick={e => changePageTo(currentPage - 1, e.target)}
@@ -53,7 +53,7 @@ function PaginationNavigation({ currentPage, onChangePage, totalPages }) {
               <div className="PaginationNavigation__gap">...</div>
             ) : (
               <LabeledButton
-                className="PaginationPageButton"
+                classes="PaginationPageButton"
                 key={`page-${idx}`}
                 title={`Go to page ${page}`}
                 pressed={page === currentPage}
@@ -69,7 +69,7 @@ function PaginationNavigation({ currentPage, onChangePage, totalPages }) {
       <div className="PaginationNavigation__relative PaginationNavigation__next">
         {hasNextPage && (
           <LabeledButton
-            className="PaginationPageButton"
+            classes="PaginationPageButton"
             icon="arrow-right"
             iconPosition="right"
             title="Go to next page"

src/styles/sidebar/buttons.scss

@@ -24,9 +24,7 @@
 // This button style has asymmetrical padding. Hold it here to see if
 // this kind of padding is useful in other patterns.
 .PaginationPageButton {
-  @include buttons.LabeledButton {
-    padding: var.$layout-space--small var.$layout-space;
-  }
+  padding: var.$layout-space--small var.$layout-space;
 }
 
 // An IconButton, but override minimum height/width on touch screen devices