/* Patterns - Navigation - Pagination */
////
/// @group Patterns-Pagination
/// Patterns - Navigation - Pagination

///
.pagination {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-top: var(--space-m);

	// pagination-container
	&-container {
		align-items: center;
		display: flex;
		justify-content: center;

		& > .pagination-button:first-child {
			margin-left: 0;
		}

		.list {
			// Service Studio Preview
			& {
				-servicestudio-display: none;
			}
		}
	}

	&-button {
		align-items: center;
		background-color: var(--color-neutral-0);
		border: var(--border-size-s) solid var(--color-neutral-4);
		border-radius: var(--border-radius-soft);
		color: var(--color-neutral-8);
		cursor: pointer;
		display: inline-flex;
		height: 32px;
		justify-content: center;
		margin-left: var(--space-s);
		padding: 0;
		width: 32px;

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

		&.is--active {
			border: var(--border-size-s) solid var(--color-primary);
			color: var(--color-primary);
			cursor: auto;
			pointer-events: none;
		}

		&.is--ellipsis {
			background-color: transparent;
			border: 0;
			cursor: auto;
			width: 16px;
		}
	}

	&-input {
		align-items: center;
		display: flex;

		// Service Studio Preview
		& {
			-servicestudio-display: none;
		}
	}

	// pagination-counter
	&-counter {
		color: var(--color-neutral-7);
	}

	.list.list-group {
		overflow: initial;
	}

	.form-control[data-input] {
		height: 32px;
		margin: var(--space-none) var(--space-s);
		padding: 0;
		text-align: center;
		width: 32px;
	}
}
// Responsive ---------------------------------------------------------------------------
///
.desktop {
	.pagination-button:not(.is--ellipsis):hover {
		background-color: rgba(21, 24, 26, 0.04);
		border: var(--border-size-s) solid var(--color-neutral-4);
	}
}

///
.tablet {
	.pagination {
		&-button,
		.form-control[data-input] {
			height: 40px;
			width: 40px;
		}
	}
}

///
.phone {
	.pagination {
		flex-direction: column;

		&-container {
			margin-top: var(--space-base);
		}

		&-button,
		.form-control[data-input] {
			height: 40px;
			width: 40px;
		}
	}
}

// IsRTL ---------------------------------------------------------------------------
///
.is-rtl {
	.pagination-button {
		margin-left: 0;
		margin-right: var(--space-s);

		.icon {
			transform: rotate(180deg);
		}
	}
}

// Accessibility ---------------------------------------------------------------------------
///
.has-accessible-features {
	.pagination-button:focus {
		border-color: var(--color-focus-inner);
	}
}

// OS HighContrast Enabled -------------------------------------------------------
///
.os-high-contrast {
	.pagination-button.is--active {
		@include a11y-high-contrast-outline;
	}
}