@use '../utilities/colors' as *;

.custom-paged {
	display: flex;
	justify-content: center;
	padding: 3rem 0 0;

	.paged-list {
		display: grid;
		justify-content: center;
		grid-auto-flow: column;
		background: rgba($blue, .12);
		padding: .5rem;
		border-radius: 25px;
		position: relative;

		.page-numbers {

			&:not(.next),
			&:not(.prev) {
				width: 30px;
				height: 30px;
				border-radius: 50%;
				display: grid;
				justify-content: center;
				align-items: center;
				color: var(--primary-color);

				&:hover {
					background-color: var(--secondary-color);
					color: #FFF;
				}
			}

			&.current {
				background-color: var(--primary-color);
				color: $white;
			}
		}

		.next,
		.prev {
			position: absolute;
			top: calc(100% / 2 - 14px);
			white-space: nowrap;
			font-size: .9rem;
			color: $text-color-light;
		}

		.prev {
			left: -80px;
		}

		.next {
			right: -80px;
		}
	}
}

.custom-paged-ajax {
	$color_1: #242B36;
	$color_2: #C7CDD5;
	$color_3: #3800FA;
	$color_4: #D6D9DD;

	.pagination-list {
		margin: 0;
		padding: 0;
		display: flex;
		list-style-type: none;
		justify-content: center;
		font-weight: bold;
		gap: .5rem;

		li {
			margin-inline: .15rem;

			button,
			span {
				height: 100%;
				min-width: 45px;
				display: block;
				padding: 10px 15px;
				border: 1px solid #E0E3E8;
				text-decoration: none;
				border-radius: 5px;
				background: #FFF;
				color: $color_1;
				user-select: none;
				font-size: .85rem;
			}

			&.first,
			&.last {
				margin-inline: 0;
			}

			&.prev,
			&.first,
			&.next,
			&.last {

				span,
				button {
					background-color: $color_2;
					color: $color_1;
					border: 1px solid $color_2;
				}
			}

			&.current {
				button {
					background-color: $color_1;
					color: #FFF;
					border: 1px solid $color_1;
				}
			}
		}
	}
}