@import (reference) "global";

.ui.pager {
	padding: 4px 0px;
	> div {
		display: inline-block;
		margin: 0 4px;
	}

	> .count {
		>.icon {
			display: none;
		}
		&.loose {
			cursor: pointer;
			>.icon {
				display: inline-block;
				margin-left: 4px;
			}
			&:hover {
				color: @primaryColor;
			}
		}
	}

	> .page-no-wrapper {
		span {
			margin: 0 2px;
			border: 1px solid @borderColor;
			border-radius: 4px;
			padding: 4px 6px;
			display: inline-block;
			text-align: center;
			min-width: 18px;
			line-height: 16px;
			&.current, &.current:hover {
				border-color: @primaryColor;
				background-color: @primaryColor;
				color: @invertedTextColor !important;;
			}
			&:not(.disabled) {
				&:hover {
					border-color: @primaryColor;
					color: @primaryColor;
				}
			}

			&.separator {
				&:before {
					content: '...';
				}
				color: @fontColor !important;;
				border-color: transparent !important;
			}
			cursor: pointer;

			&.nav-btn {
				font-family: Icons;
				&.prev {
					&:before {
						content: "\f0d9";
					}
				}
				&.next {
					&:before {
						content: "\f0da";
					}
				}
				&.disabled {
					opacity: 0.5;
					color: #818181;
				}
			}
		}
	}

	> .goto {
		input {
			width: 3em;
			text-align: center;
			border-radius: 4px;
			border: 1px solid @borderColor;
			&:focus, &:hover {
				border-color: @primaryColor;
			}
			padding: 4px 6px;
			line-height: 16px;
			margin: 0 4px;
		}
	}
	.ui.input.drop.page-size {
		margin: 0 8px;
		display: inline-block;
		input {
			line-height: 16px;
			padding: 4px 6px;
			background-color: #FFFFFF;
			width: 7.25em;
			padding-left: 4px;
			padding-right: 1em !important;
		}
	}
}