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