@use '../utils' as *;
/*----------------------------------------*/
/*  2.9 Pagination
/*----------------------------------------*/

.#{$theme-prifix}-pagination{
	& ul{
		@media only screen and (min-width: 768px) {
			@include flexbox();
		}

		& li{
			display: inline-block;
			margin-top: 6px;

			&:not(:last-child){
				[dir=ltr] & {
					margin-right: 6px;
				}

				[dir=rtl] & {
					margin-left: 6px;
				}
			}
			& a,
			& span{
				display: inline-block;
				width: 40px;
				height: 40px;
				line-height: 38px;
				text-align: center;
				border: 1px solid rgba($color: $black, $alpha: .1);
				font-size: 16px;
				font-weight: 500;
				color: var(--tp-text-body);
				&:hover,
				&.current{
					background: var(--tp-theme-primary);
					border-color: var(--tp-theme-primary);
					//color: var(--tp-common-white) !important;
					color: var(--tp-hover-color) !important;
				}

				& svg{
					@extend %tp-svg-y-2;
				}
			}
		}
	}
}