//////////////////////////////////////////
// PAGINATION
//////////////////////////////////////////

.pagination{
	padding: 2rem 0 0;
	overflow: hidden;
	color: $text-grey;
	@include flex;
	@include flex-justify(flex-end);
	font-size: 0.875rem;

	ul{
		@include flex;

		@include break(mp){
			@include flex-value(1);
		}
	}

	li{
		padding: 0 0.25rem;
		@include flex;

		&.page-number{
			margin-left: 0.75rem;
		}
	}

	.select{
		padding: 0 0 0 0.5rem;

		@include break(mp){
			display: none;
		}

		select{
			min-width: rem(65);
		}
	}

	.page-number{
		font-weight: 700;
		text-transform: uppercase;
		@include align-self(center);

		@include break(mp){
			display: none;
		}
	}

	.page-nav{
		margin-right: auto;
	}

	a{
		@extend .button;
		@include flex;
		@include align-self(stretch);
		@include flex-align(center);
		padding: 0 1rem;
		margin: 0;

		@include break(mp){
			padding: 0.5rem;
		}
	}
}