@import "./mixins.scss";

.jet-ui_pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	color: $color-text-secondary;

	&-items {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		margin: -5px;
		padding: 0;
		margin-top: 0;
		margin-bottom: 0;
		list-style: none;
	}

	&-item {
		margin: 2px;
	}

	&-prev,
	&-next,
	&-page-link {
		cursor: pointer;
		user-select: none;
		height: 32px;
		line-height: 32px;
		text-align: center;
		border-radius: $radius;

		&:hover {
			color: $color-accent;
		}
	}

	&-page-link {
		width: 32px;
	}

	&-prev,
	&-next {
		margin: 0 10px;
		display: flex;
		align-items: center;

		&-text {
			padding: 0 5px;
		}

		svg path {
			fill: $color-text-secondary;
		}

		&:hover {
			svg path {
				fill: $color-accent;
			}
		}
	}

	&-item.active &-page-link {
		cursor: default;
		color: $color-accent-text;
		background-color: rgba($color-accent, 0.5);
	}

	&-prev,
	&-next {
		&.jet-ui_disabled {
			opacity: 0.5;
		}
	}
}
