// Stats Pagination
// I like lamp.

$minimal-active: var(--studio-black);
$minimal-inactive: var(--studio-gray-30);
$minimal-arrow-color: var(--studio-gray-50);
$minimal-arrow-size: 24px;

.pagination {
	width: 100%;

	&.is-compact .pagination__list-item {
		.pagination__list-button.button.is-borderless {
			padding: 5px 8px;
		}

		&.pagination__ellipsis span {
			padding: 5px 6px;
		}

		&.pagination__arrow .pagination__list-button.button.is-borderless {
			padding: 6px;
		}
	}

	&.is-minimal {
		.pagination__list-item,
		.pagination__list-item:first-child,
		.pagination__list-item:last-child {
			.pagination__list-button.button {
				padding: 8px 16px;
				background-color: transparent;
				border: none;
				color: $minimal-inactive;

				&:hover {
					color: $minimal-active;
				}

				&:disabled {
					visibility: hidden;
				}
			}

			&.pagination__ellipsis span {
				padding: 8px 16px;
				background-color: transparent;
				border: none;
				color: $minimal-inactive;
			}


			&.is-selected {
				.pagination__list-button.button {
					background-color: transparent;
					color: $minimal-active;

					&:hover {
						color: $minimal-active;
					}
				}
			}

			&.pagination__arrow {
				.pagination__list-button {
					color: $minimal-arrow-color;
					line-height: $minimal-arrow-size;
				}

				.gridicon {
					width: $minimal-arrow-size;
					height: $minimal-arrow-size;
				}
			}
		}
	}
}

.pagination__list {
	display: flex;
	margin: 0;
	list-style: none;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	@include clear-fix;
}

// List item styles for all links
.pagination__list-item {
	.pagination__list-button.button.is-borderless,
	&.pagination__ellipsis span {
		@extend %mobile-link-element;
		padding: 8px 12px;
		background-color: var(--color-surface);
		border: solid 1px var(--color-neutral-10);
		border-right: none;
		font-size: $font-body-small;
		line-height: 18px;
		color: var(--color-text-subtle);
		text-align: center;
		border-radius: 0;
		display: flex;
		flex-wrap: nowrap;

		.gridicon {
			top: 1px;

			.pagination.is-compact & {
				top: 0;
			}
		}
	}

	&:first-child .pagination__list-button.button.is-borderless {
		border-top-left-radius: 2px;
		border-bottom-left-radius: 2px;
	}

	&:last-child .pagination__list-button.button.is-borderless {
		border-right: solid 1px var(--color-neutral-10);
		border-top-right-radius: 2px;
		border-bottom-right-radius: 2px;
	}
}

// Left/right navigation arrows
.pagination__list-item.pagination__arrow {
	display: flex;
	align-items: center;

	&.is-left {
		padding-left: 14px;
		float: left;

		.gridicon {
			margin-right: 2px;
		}
	}

	&.is-right {
		padding-right: 14px;
		float: right;

		.gridicon {
			margin-left: 2px;
		}
	}

	.gridicon {
		vertical-align: middle;
		width: 18px;
		height: 18px;
	}
}

// // Hover/focus states
.pagination__list-item .pagination__list-button.button.is-borderless:not([disabled]):hover,
.pagination__list-item .pagination__list-button.button.is-borderless:focus {
	color: var(--color-neutral-70);
	outline: none;
}

// Selected state
.pagination__list-item.is-selected .pagination__list-button.button.is-borderless {
	border-color: var(--color-primary);
	background-color: var(--color-primary);
	color: var(--color-text-inverted);
}

.pagination__list-item.is-selected .pagination__list-button.button.is-borderless:hover {
	color: var(--color-text-inverted);
}

.pagination__list-item.is-selected + .pagination__list-item
.pagination__list-button.button.is-borderless {
	border-left: 0;
}

// Abridgement indication
.pagination__ellipsis,
.pagination__ellipsis:hover {
	@extend %mobile-interface-element;
	color: var(--color-neutral-light);
}
