1.pagination,
2.pagination li a {
3  display: -webkit-box;
4  display: -ms-flexbox;
5  display: flex;
6  -ms-flex-wrap: wrap;
7  flex-wrap: wrap;
8  -webkit-box-pack: center;
9  -ms-flex-pack: center;
10  justify-content: center;
11  -webkit-box-align: center;
12  -ms-flex-align: center;
13  align-items: center;
14  padding: 0 10px;
15}
16
17.pagination li { background-color: transparent; list-style-type: none; }
18
19.pagination a {
20  font-weight: 300;
21  padding-top: 1px;
22  text-decoration:none;
23  border: 1px solid $border-color-01;
24  border-left-width: 0;
25  min-width:44px;
26  min-height:44px;
27  color: $text-01;
28}
29
30.pagination li:not([class*="current"]) a:hover {
31  background-color: $primary-accent;
32  color: $primary-light;
33}
34
35.pagination li:not([class*="current"]) a:focus,
36.pagination li:not([class*="current"]) a:active {
37  border-left-width:1px;
38}
39
40.pagination li:first-of-type a {
41  border-left-width: 1px;
42}
43
44.pagination li:first-of-type span,
45.pagination li:last-of-type span,
46.pagination li:nth-of-type(2) span,
47.pagination li:nth-last-of-type(2) span {
48  /* screen readers only */
49  position: absolute;
50  top: -9999px;
51  left: -9999px;
52}
53
54.pagination li:first-child a::before,
55.pagination li:last-child a::after,
56.pagination li:nth-of-type(2) a::before,
57.pagination li:nth-last-of-type(2) a::after {
58  display: inline-block;
59  text-rendering: auto;
60  font-size: 1.3em;
61  -webkit-font-smoothing: antialiased;
62  -moz-osx-font-smoothing: grayscale;
63  -webkit-transform: translate(0, 0);
64  transform: translate(0, 0);
65}
66
67.pagination li:first-child a::before,
68
69
70.pagination li:nth-of-type(2) a::before,
71
72
73.pagination li:first-child a::before,
74.pagination li:nth-of-type(2) a::before { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
75
76.pagination li.current a, .pagination li.active a {
77  padding-top:.25em;
78  color: $primary-light;
79  background-color: $background-05;
80  cursor: default;
81  pointer-events: none;
82  font-weight: 700;
83}
84
85@media only screen and ( max-width: 64.063em ) {
86  .pagination li:first-child,
87  .pagination li:last-child {
88    /* screen readers only */
89    position: absolute;
90    top: -9999px;
91    left: -9999px;
92  }
93
94  .pagination li:nth-of-type(2) a { border-left-width: 1px; }
95
96}
97
98@media only screen and ( max-width: 40.063em ) {
99  .pagination li {
100    /* screen readers only */
101    position: absolute;
102    top: -9999px;
103    left: -9999px;
104  }
105
106  .pagination li.current,
107  .pagination li:first-of-type,
108  .pagination li:last-of-type,
109  .pagination li:nth-of-type(2),
110  .pagination li:nth-last-of-type(2){
111    position: initial;
112    top: initial;
113    left: initial;
114  }
115
116  .pagination li:nth-of-type(2) a { border-left-width: 0; }
117
118}
119
120@media only screen and ( max-width: 30.063em ) {
121
122  h1 { font-size: 1.35em !important; }
123
124  .pagination li:first-child,
125  .pagination li:last-child {
126    /* screen readers only */
127    position: absolute;
128    top: -9999px;
129    left: -9999px;
130  }
131
132  .pagination li:nth-of-type(2) a { border-left-width: 1px; }
133
134}
135
136@media only screen and ( max-width: 15.063em ) {  /* For watches? */
137
138  .pagination li { width: 50%;}
139
140  .pagination li.current {
141    -webkit-box-ordinal-group: 3;
142    -ms-flex-order: 2;
143    order: 2;
144    width: 100%;
145    border-left-width: 1px;
146
147  }
148
149}