@import '@resources/index.css';

.supt-pagination {
	@mixin clamp margin-top, 64, 120, $xxs-breakpoint, $lg-breakpoint;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;

	ul {
		list-style: none;
		display: flex;
		justify-content: center;
		gap: 4px;
	}

	li {
		> span {
			@extend %t-sm-normal-medium;
			display: block;
			width: 32px;
			height: 32px;
			text-align: center;
			user-select: none;
		}
	}

	&__link {
		@extend %t-sm-normal-medium;

		background: none;
		width: 32px;
		height: 32px;

		.supt-button-icon__clone {
			transform: translateX(-32px);
		}

		@mixin desktop-only {
			&:hover:not([disabled]) {
				.supt-button-icon__main {
					transform: translateX(32px);
				}
			}
		}

		&.-is-prev,
		&.-is-next {
			/* Visual adjustement */
			top: 1px;
		}

		&.-is-active {
			background-color: var(--card-background-color);
		}
	}
}