Template:NavArrows/style.css

.navArrow-left, .navArrow-right {
    flex: 1;
    display: flex;
}

.navArrow-left:hover, .navArrow-right:hover {
    z-index: 5;
}

.navArrow-left{
	text-align:left;
}

.navArrow-right{
	text-align:right;
}

.navArrow-left a {
    margin-left: .5em;
    flex: 1;
}

.navArrow-right a {
    margin-right: .5em;
    flex: 1;
}

.navArrow-left .navArrow {
    margin-right: .3em;
}

.navArrow-right .navArrow{
	margin-left: .3em;
}

.navArrow-left:hover .navArrow, .navArrow-left:hover:hover .navArrow:before {
    transform: translateX(-25%);
}

.navArrow-right:hover .navArrow, .navArrow-right:hover:hover .navArrow:before {
    transform: translateX(25%);
}

.navArrow {
	display: inline-block;
	transition: 0.3s ease-out;
	font-family: Segoe Fluent Icons;
}

.navArrow:before{
	font-family: Segoe Fluent Icons;
	font-size: 1.5em;
	vertical-align: middle;
}

.navArrow-left .navArrow:before{
	content: '\E112';
}

.navArrow-right .navArrow:before{
	content: '\E111';
}

.navArrow-left-noLink{
	margin-left: 0.5em;
	padding: 0.7em;
}

.navArrow-right-noLink{
	margin-right: 0.5em;
	padding: 0.7em;
	justify-content: flex-end;
}