@use '../utils' as *;

/*----------------------------------------
PAGINATION CSS START
-----------------------------------------*/

.bd-basic {
	&__pagination {
		ul {
			@include flexbox();
			align-items: center;
			gap: 12px;
			flex-wrap: wrap;
			@media #{$xs,$sm,$md}{
				justify-content: start;
			}
			li {
				list-style: none;
				a {
					width: 50px;
					height: 50px;
					display: inline-flex;
					align-items: center;
					justify-content: center;
					position: relative;
					right: 0;
					top: 50%;
					font-weight: 600;
					font-size: 18px;
					border: 1px solid var(--clr-border-2);
					@include border-radius(50%);
					&:hover {
						background-color: var(--clr-theme-secondary);
						color: var(--clr-common-white);
						border-color: transparent;
						svg *{
							stroke: var(--clr-common-heading);
						}
					}
				}
				.current {
					width: 50px;
					height: 50px;
					display: inline-flex;
					align-items: center;
					justify-content: center;
					position: relative;
					right: 0;
					top: 50%;
					font-weight: 500;
					font-size: 16px;
					background-color: var(--clr-theme-secondary);
					color: var(--clr-common-white);
					@include border-radius(50%);
				}
			}
		}
	}
}
