@import '../../common';

.rs-post-navigation {
	position: relative;
	&::before{
		position: absolute;
		content: '';
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 2px;
		height: 56px;
		background: rgb(14 14 14 / 20%);
	}
	ul {
		margin: 0;
		padding: 0;
		list-style: none;
		display: block;
		li {
			margin-right: 10px;
			width: auto;
			a {
				background: $primaryColor;
				color: #fff;
				padding: 9px 22px;
				border-radius: 6px;
				display: inline-block;
				font-size: 14px;
				font-weight: 600;
				line-height: 24px;
				transition: $transition;
				span {
					display: flex;
					align-items: center;
					svg {
						position: relative;
						margin-right: 10px;
						
						path {
							fill: #fff;
							transition: $transition;
						}
						top: -2px;
					}
				}
			}
			&.next {
				margin-right: 0;
				float: right;
				a {
					display: flex;
					align-items: flex-end;
					justify-content: end;
					flex-direction: column;
					position: relative;
					transition: $transition;
					svg {
						width: 14px;
						height: 14px;
						margin-right: 0;
						margin-left: 10px;
						transition: $transition;
						path{
							transition: $transition;

						}
					}
				}
			}
			&.prev {
				float: left;
				a {	
					svg {
						width: 14px;
						height: 14px;
						transition: all 0.3s linear;
					}
				}
			}


		}
	}
	&.enable-dot{
		ul{
			li{
				&.prev{
					a{
						position: relative;	
						&::before{
							position: absolute;
							content: '';
							left: 0;
							top: -4px;
							height: 8px;
							width: 8px;
							background: $titleColor;
							transition: $transition;
							display: inline-block;
						}
						&::after{
							position: absolute;
							content: '';
							left: 0;
							bottom: -4px;
							height: 8px;
							width: 8px;
							background: $titleColor;
							transition: $transition;
							display: inline-block;
						}	
					}
					&:hover{
						a{
							&::after,
							&::before{
								background: $primaryColor;
							}
						}
					}
				}
				&.next{
					a{
						position: relative;
						&::before{
							position: absolute;
							content: '';
							right: 0;
							top: -4px;
							height: 8px;
							width: 8px;
							background: $titleColor;
							transition: $transition;
							display: inline-block;
						}
						&::after{
							position: absolute;
							content: '';
							right: 0;
							bottom: -4px;
							height: 8px;
							width: 8px;
							background: $titleColor;
							transition: $transition;
							display: inline-block;
						}
					}
					&:hover{
						a{
							&::after,
							&::before{
								background: $primaryColor;
							}
						}
					}
				}
			}
		}
	}
}