@import url(~antd/lib/pagination/style/index-pure.less);
@import '../../style/themes/index';
@import '../../input/style/mixin.less';
.@{pagination-prefix-cls} {
	&-total-text {
		font-size: @pagination-item-font-size;
	}

	&-item {
		margin-right: @pagination-item-margin;
		border: none;
		font-family: Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Noto Color Emoji';
		font-size: @pagination-item-font-size;
		a {
			color: @text-color;
			transition: none;
			line-height: @pagination-item-size;
			&:hover {
				text-decoration: none;
			}
		}
		&:focus-visible,
		&:hover {
			background-color: @component-background-hover;
			transition: all 0.3s;

			a {
				color: inherit;
			}
		}

		&-active {
			font-weight: unset;
			color: @pagination-item-color-active;
			// background: @component-background-selected;

			a {
				color: inherit;
			}

			&:focus-visible,
			&:hover {
				background: @pagination-item-bg-active;
			}

			&:focus-visible a,
			&:hover a {
				color: inherit;
			}
		}
	}

	&-jump-prev,
	&-jump-next {
		.@{pagination-prefix-cls}-item-container {
			.@{pagination-prefix-cls}-item-link-icon {
				color: @text-color;
			}

			.@{pagination-prefix-cls}-item-ellipsis {
				color: @pagination-item-color;
			}
		}
	}

	&-prev,
	&-jump-prev,
	&-jump-next {
		margin-right: @pagination-item-margin;
	}

	&-prev,
	&-next {
		font-family: Arial, Helvetica, sans-serif;
		outline: 0;

		button {
			color: @text-color;
			cursor: pointer;
			user-select: none;
		}

		.@{pagination-prefix-cls}-item-link {
			font-size: @pagination-item-font-size;
			border: none;
			color: @font-color-caption;
			display: flex;
			align-items: center;
			justify-content: center;
			.@{iconfont-css-prefix} {
				font-size: @iconfont-size-sm;
			}
		}

		&:focus-visible .@{pagination-prefix-cls}-item-link,
		&:hover .@{pagination-prefix-cls}-item-link {
			color: @pagination-item-color;
			background-color: @component-background-hover;
		}
	}

	&-next {
		margin-right: 0 !important;
	}

	&-disabled {
		&,
		&:hover,
		&:focus-visible {
			cursor: not-allowed;
			.@{pagination-prefix-cls}-item-link {
				color: @pagination-item-disabled-color-active;
				background: transparent !important;
				cursor: not-allowed;
			}
		}
	}

	&-options {
		margin-left: @margin-md;
		margin-right: @margin-md;

		&-quick-jumper {
			display: inline-flex;
			align-items: center;
			margin-left: @margin-md;
			input {
				.input-base();
				width: 40px;
				padding-left: 3px;
				padding-right: 3px;
				text-align: center;
				margin: 0 @margin-xss;
			}
		}
	}

	//
	&.small &-total-text,
	&.small &-simple-pager,
	&.xs &-total-text,
	&.xs &-simple-pager {
		font-size: @pagination-item-mini-font-size;
	}

	&.small &-item {
		line-height: @pagination-item-size-sm;
		height: @pagination-item-size-sm;
		min-width: @pagination-item-size-sm;
		font-size: @pagination-item-mini-font-size;
		a {
			line-height: @pagination-item-size-sm;
		}
		&:not(&-item-active) {
			&:focus-visible,
			&:hover {
				background-color: @component-background-hover;
				transition: all 0.3s;

				a {
					color: inherit;
				}
			}
		}

		&-active {
			background: @pagination-item-bg-active;
			&:focus-visible,
			&:hover {
				background: @pagination-item-bg-active;
			}
			&:focus-visible a,
			&:hover a {
				color: inherit;
			}
		}
	}

	&.small &-prev,
	&.small &-next {
		height: @pagination-item-size-sm;
		min-width: @pagination-item-size-sm;
		&:focus-visible .@{pagination-prefix-cls}-item-link,
		&:hover .@{pagination-prefix-cls}-item-link {
			color: @pagination-item-color;
			background-color: @component-background-hover;
		}
	}

	&.small &-prev &-item-link,
	&.small &-next &-item-link {
		&::after {
			height: @pagination-item-size-sm;
			line-height: @pagination-item-size-sm;
		}
	}

	&.small &-jump-prev,
	&.small &-jump-next {
		height: @pagination-item-size-sm;
		margin-right: 0;
		line-height: @pagination-item-size-sm;
	}

	&.small &-options {
		margin-left: @margin-sm;
		margin-right: @margin-sm;

		&-size-changer {
			top: @pagination-mini-options-size-changer-top;
		}

		&-quick-jumper {
			font-size: @pagination-item-mini-font-size;
			margin-left: @margin-sm;
			line-height: @pagination-item-size-sm;
			height: @pagination-item-size-sm;
			input {
				.bd-input-sm();
				padding-left: 0;
				padding-right: 0;
				text-align: center;
				height: @pagination-item-size-sm;
				width: 28px;
			}
		}
	}

	//xs

	&.xs &-item {
		min-width: @pagination-item-size-xs;
		height: @pagination-item-size-xs;
		margin: 0;
		line-height: @pagination-item-size-xs;
		margin-right: 3px;
		font-size: @pagination-item-mini-font-size;
		a {
			line-height: @pagination-item-size-xs;
		}
	}

	&.xs &-prev,
	&.xs &-next {
		margin-right: 3px;
		min-width: @pagination-item-size-xs;
		height: @pagination-item-size-xs;
		line-height: @pagination-item-size-xs;
	}

	&.xs &-prev &-item-link,
	&.xs &-next &-item-link {
		&::after {
			height: @pagination-item-size-xs;
			line-height: @pagination-item-size-xs;
		}
	}

	&.xs &-jump-prev,
	&.xs &-jump-next {
		height: @pagination-item-size-xs;
		margin-right: 0;
		line-height: @pagination-item-size-xs;
	}

	&.xs &-options {
		margin-left: @margin-xs;
		margin-right: @margin-xs;

		&-size-changer {
			top: @pagination-mini-options-size-changer-top;
		}

		&-quick-jumper {
			font-size: @pagination-item-mini-font-size;
			margin-left: @margin-xs;
			height: @pagination-item-size-xs;
			input {
				.bd-input-xs();
				height: @pagination-item-size-xs;
				padding-left: 0;
				padding-right: 0;
				text-align: center;
				width: 24px;
			}
		}
	}

	//disabled
	// ============================ Disabled ============================
	&&-disabled {
		.@{pagination-prefix-cls}-item {
			background: transparent !important;
			cursor: not-allowed;

			a {
				color: @disabled-color!important;
				background: transparent;
				border: none;
				cursor: not-allowed;
			}
			&-active {
				// background: @pagination-item-disabled-bg-active;
				background: @disabled-bg!important;

				a {
					color: @pagination-item-disabled-color-active;
				}
			}
		}

		.@{pagination-prefix-cls}-item-link {
			background: transparent !important;
			color: @disabled-color!important;
		}

		.@{pagination-prefix-cls}-item-ellipsis {
			color: @disabled-color;
		}
	}
}
@import './simple.less';
