.page-navigation {
	ul {
		border-top: 1px solid $grayLight;
		text-align: center;
		font-size: 0;

		li {
			display: inline-block;
			font-size: 14px;
			width: $unit;

			&.previous,
			&.next {
				position: relative;
				border: 1px solid $grayLight;
				border-top: 0;
				overflow: hidden;

				a {
					text-indent: -9999px;

					&:before {
						position: relative;
						top: 5px;
						display: block;
						width: $unit;
						height: $unit;
						text-align: center;
						font-size: 26px;
						line-height: 26px;
						font-weight: normal;
						font-style: normal;
						text-decoration: inherit;
						-webkit-font-smoothing: antialiased;
						text-indent: 0;
						color: #fff;
					}
				}
			}

			&.previous {
				float: left;

				a {

					&:before {
						content: "‹";
					}
				}
			}

			&.next {
				float: right;

				a {
					&:before {
						content: "›";
					}
				}
			}

			&.current {
				border: 1px solid $grayLight;
				border-top: 0;
				height: $unit;
				width: $unit;
				line-height: $unit;
				color: $blue;
			}

			a {
				display: block;
				width: $unit;
				height: $unit;
				line-height: $unit;
				text-align: center;
				color: #fff;

				&:hover {
					color: #fff;
					background-color: $blue;
					text-decoration: none;
				}
			}
		}
	}
}