src/main/webapp/search/pagination/scss/style.scss
@import 'bourbon'; // http://bourbon.io/

@import '../partials/variables'; // colors, fonts etc...

@import '../partials/layout'; // responsive grid and media queries

*, *::after, *::before {
	@include box-sizing(border-box);
}

html {
	font-size: 62.5%;
}

html * {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	font: {
		size: 1.6rem;
		family: $primary-font; // variables inside partials > _variables.scss
	}
	color: $color-1;
	background-color: $color-3;
}

a {
	color: $color-1;
	text-decoration: none;
}

section {
	/* used just to separate paginations */
	border-bottom: 1px solid darken($color-3, 10%);

	h2 {
		width: 90%;
		margin: 2em auto 0;
		color: lighten($color-1, 35%);
		font-weight: 700;
		text-align: center;
	}

	@include MQ(L) {
		h2 {
			margin: 4em auto 0;
		}
	}
}

/* -------------------------------- 

Basic style

-------------------------------- */

nav[role="navigation"] {
	text-align: center;
}

.cd-pagination {
	width: 90%;
	max-width: $M;
	margin: 2em auto 4em;
	text-align: center;

	li {
		/* hide numbers on small devices */
		display: none;
		margin: 0 .2em;

		&.button {
			/* make sure prev next buttons are visible */
			display: inline-block;
		}
	}

	a, span {
		display: inline-block;
		@include user-select(none);
		/* use padding and font-size to change buttons size */
		padding: .6em .8em;
		font-size: 1.6rem;
	}

	a {
		border: 1px solid darken($color-3, 10%);
		border-radius: $border-radius;

		.no-touch &:hover {
			background-color: darken($color-3, 5%);
		}

		&:active {
			/* click effect */
			@include transform(scale(.9));
		}

		&.disabled {
			/* button disabled */
			color: rgba($color-1, .4);
			pointer-events: none;

			&::before, &::after {
				opacity: .4;
			}
		}
	}

	.button:first-of-type a::before {
		content: '\00ab  ';
	}

	.button:last-of-type a::after {
		content: ' \00bb';
	}

	.current {
		/* selected number */
		background-color: $color-2;
		border-color: $color-2;
		color: $color-3;
		pointer-events: none;
	}

	@include MQ(M) {
		li {
			display: inline-block;
		}
	}

	@include MQ(L) {
		margin: 4em auto 8em;
	}
}

/* -------------------------------- 

No space - remove distance between list items

-------------------------------- */

.cd-pagination.no-space {
	width: auto;
	max-width: none;
	display: inline-block;
	border-radius: $border-radius;
	@include clearfix;
	border: 1px solid darken($color-3, 10%);

	li {
		margin: 0;
		float: left;
		border-right: 1px solid darken($color-3, 10%);

		&:last-of-type {
			border-right: none;
		}
	}

	a, span {
		float: left;
		border-radius: 0;
		padding: .8em 1em; 
		border: none;
	}

	li:first-of-type a {
		border-radius: $border-radius 0 0 $border-radius;
	}

	li:last-of-type a {
		border-radius: 0 $border-radius $border-radius 0;
		
	}
}

/* -------------------------------- 

move buttons - move prev and next buttons to the sides

-------------------------------- */

.cd-pagination.move-buttons {
	@include clearfix;

	.button:first-of-type {
		float: left;
	}

	.button:last-of-type {
		float: right;
	}
}

.cd-pagination.no-space.move-buttons {
	width: 90%;
	max-width: $M;
	display: block;
	overflow: hidden;

	li {
		float: none;
		border: none;
	}

	a, span {
		float: none;
	}
}

/* -------------------------------- 

custom icons - customize the small arrow inside the next and prev buttons 

-------------------------------- */

.cd-pagination.custom-icons {
	.button a {
		position: relative;
	}

	.button:first-of-type a {
		padding-left: 2.4em;
	}

	.button:last-of-type a {
		padding-right: 2.4em;
	}

	.button:first-of-type a::before,
	.button:last-of-type a::after {
		content: '';
		position: absolute;
		display: inline-block;
		/* set size for custom icons */
		width: 16px;
		height: 16px;
		top: 50%;
		/* set margin-top = icon height/2 */
		margin-top: -8px;
		background: transparent url('../img/cd-icon-arrow-1.svg') no-repeat center center;
	}

	.button:first-of-type a::before {
		left: .8em;
	}

	.button:last-of-type a::after {
		right: .8em;
		@include transform(rotate(180deg));
	}
}

/* -------------------------------- 

custom buttons - replace prev and next buttons text with a custom icon 

-------------------------------- */

.cd-pagination.custom-buttons {

	a, span {
		vertical-align: middle;
	}

	.button a {
		/* set custom width */
		width: 40px;
		
		/* image replacement */
		overflow: hidden;
		white-space: nowrap;
		text-indent: 100%;
		color: transparent;
		background-image: url('../img/cd-icon-arrow-2.svg');
		background-repeat: no-repeat;
		background-position: center center;
	}

	.button:last-of-type a {
		@include transform(rotate(180deg));

		.no-touch &:active {
			@include transform(scale(.9) rotate(180deg));
		}
	}
}

.cd-pagination.no-space.custom-buttons {
	.button:last-of-type a {
		border-radius: $border-radius 0 0 $border-radius;
	}
}

/* -------------------------------- 

animated buttons - animate the text inside prev and next buttons 

-------------------------------- */

.cd-pagination.animated-buttons {
	a, span {
		padding: 0 1.4em;
		height: 50px;
		line-height: 50px;
		overflow: hidden;
	}

	.button a {
		position: relative;
		padding: 0 2em;
	}

	.button:first-of-type a::before,
	.button:last-of-type a::after {
		left: 50%;
		@include transform(translateX(-50%));
		right: auto;
		@include transition(transform .3s);
	}

	.button:last-of-type a::after {
		@include transform(translateX(-50%) rotate(180deg));
	}

	i {
		display: block;
		height: 100%;
		@include transform(translateY(100%));
		@include transition(transform .3s);
	}
}

.no-touch .cd-pagination.animated-buttons .button a:hover i {
	@include transform(translateY(0));
}

.no-touch .cd-pagination.animated-buttons .button:first-of-type a:hover::before {
	@include transform(translateX(-50%) translateY(-50px));
}

.no-touch .cd-pagination.animated-buttons .button:last-of-type a:hover::after {
	@include transform(translateX(-50%) rotate(180deg) translateY(50px));
}
