From 669375929c8c35794270513042130b5d7670a83f Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Thu, 27 Jan 2022 16:47:27 -0500
Subject: [PATCH] chore(Pagination): v11 Pagination audit fixes (#10534)

* style(Pagination): tweak a few styles for audit

* style(Pagination): port over size styles

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../components/pagination/_pagination.scss    | 57 ++++++++++++++++---
 1 file changed, 50 insertions(+), 7 deletions(-)

diff --git a/packages/styles/scss/components/pagination/_pagination.scss b/packages/styles/scss/components/pagination/_pagination.scss
index 18461fe69a8e..9bfb370d8193 100644
--- a/packages/styles/scss/components/pagination/_pagination.scss
+++ b/packages/styles/scss/components/pagination/_pagination.scss
@@ -26,11 +26,11 @@
 
   .#{$prefix}--pagination {
     @include component-reset.reset;
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     display: flex;
     width: calc(100% - 1px);
-    min-height: 3rem;
+    min-height: rem(40px);
     align-items: center;
     justify-content: space-between;
     border-top: 1px solid $border-subtle;
@@ -62,6 +62,14 @@
     }
   }
 
+  .#{$prefix}--pagination--sm {
+    min-height: rem(32px);
+  }
+
+  .#{$prefix}--pagination--lg {
+    min-height: rem(48px);
+  }
+
   .#{$prefix}--pagination .#{$prefix}--select {
     height: 100%;
     align-items: center;
@@ -75,7 +83,16 @@
   .#{$prefix}--pagination .#{$prefix}--select-input {
     width: auto;
     min-width: auto;
-    height: 3rem;
+    height: 100%;
+    line-height: rem(40px);
+  }
+
+  .#{$prefix}--pagination--sm .#{$prefix}--select-input {
+    line-height: rem(32px);
+  }
+
+  .#{$prefix}--pagination--lg .#{$prefix}--select-input {
+    line-height: rem(48px);
   }
 
   .#{$prefix}--pagination
@@ -85,7 +102,18 @@
   }
 
   .#{$prefix}--pagination .#{$prefix}--select-input:hover {
-    background: $background-hover;
+    background: $layer-hover;
+  }
+
+  .#{$prefix}--pagination
+    .#{$prefix}--select--inline
+    .#{$prefix}--select-input:focus
+    option,
+  .#{$prefix}--pagination
+    .#{$prefix}--select--inline
+    .#{$prefix}--select-input:focus
+    optgroup {
+    background-color: $layer;
   }
 
   .#{$prefix}--pagination .#{$prefix}--select__arrow {
@@ -108,7 +136,7 @@
   .#{$prefix}--pagination__left,
   .#{$prefix}--pagination__right {
     display: flex;
-    height: 3rem;
+    height: 100%;
     align-items: center;
   }
 
@@ -155,8 +183,9 @@
     @include component-reset.reset;
 
     display: flex;
-    width: $spacing-09;
-    height: 100%;
+    width: rem(40px);
+    height: rem(40px);
+    min-height: rem(32px);
     align-items: center;
     justify-content: center;
     border: none;
@@ -169,6 +198,20 @@
       background-color $duration-fast-02 motion(standard, productive);
   }
 
+  .#{$prefix}--pagination--sm .#{$prefix}--pagination__button,
+  .#{$prefix}--pagination--sm
+    .#{$prefix}--btn--ghost.#{$prefix}--pagination__button {
+    width: rem(32px);
+    height: rem(32px);
+  }
+
+  .#{$prefix}--pagination--lg .#{$prefix}--pagination__button,
+  .#{$prefix}--pagination--lg
+    .#{$prefix}--btn--ghost.#{$prefix}--pagination__button {
+    width: rem(48px);
+    height: rem(48px);
+  }
+
   .#{$prefix}--pagination__button:focus,
   .#{$prefix}--btn--ghost:focus.#{$prefix}--pagination__button {
     @include focus-outline('outline');