@use 'sass:map';
@use '../../base/maps/tokens' as *;
@use '../../base/functions' as *;
@use '../../base/mixins/typography' as font;
@use '../../base/mixins/breakpoints' as break;

.pagination {
	&-links {
		display: flex;
		gap: var(--padding-extra-small);
		justify-content: center;

		@include break.max-mobile {
			display: none;
		}

		&-bar {
			display: flex;
			justify-content: center;
			gap: var(--padding-small);
		}

		&-tile,
		&-util,
		&-skip {
			display: flex;
			align-items: center;
			padding: var(--padding-extra-small) var(--padding-small);
			border-width: 0.0625rem;
			border-style: solid;
			border-radius: var(--radius-small);
			text-decoration: none;
			transition:
				color var(--transition-fast),
				background-color var(--transition-fast),
				border-color var(--transition-fast);

			@include font.get-typography(body-lead);

			color: var(--action);
			background-color: var(--neutral-1);
			border-color: with-opacity(var(--ui-body), 30);

			&:hover {
				color: var(--action-secondary);
				background-color: var(--action);
				border-color: var(--action);
			}
		}

		&-tile {
			&.active {
				border-color: var(--neutral-6);
			}
		}

		&-skip {
			.general-icon {
				color: inherit;
			}
		}

		&-util {
			&.util-prev {
				&::after {
					content: '\e913'; // icon-chevron-left
					font-family: brandui-icons;
					font-size: 1.5rem;
					font-style: normal;
				}
			}

			&.util-next {
				&::after {
					content: '\e914'; // icon-chevron-right
					font-family: brandui-icons;
					font-size: 1.5rem;
					font-style: normal;
				}
			}

			&.disabled {
				opacity: 0.5;
				pointer-events: none;
			}
		}
	}
}