/*
Pagination Container Styling
This section styles the pagination container. It ensures the pagination elements are displayed inline,
with proper padding, margins, and border-radius.
*/
.bn-pagination {
	display: inline-block; /* Displays pagination as an inline block */
	padding-left: 0; /* Removes default left padding */
	margin: 5px 0; /* Adds margin on the top and bottom */
	border-radius: 4px; /* Rounds the corners of the pagination */
}

/*
Pagination List Item Styling
This section ensures that each list item is displayed inline.
*/
.bn-pagination > li {
	display: inline; /* Displays each list item inline */
}

/*
Pagination Links & Span Styling
This styles the links (a) and spans in the pagination list items, giving them padding, background color,
border, and removing text decoration.
*/
.bn-pagination > li > a,
.bn-pagination > li > span {
	position: relative; /* Positions each element relatively */
	float: left; /* Aligns elements to the left */
	padding: 4px 8px; /* Adds padding around the content */
	margin-left: -1px; /* Removes default left margin */
	line-height: 1.42857143; /* Sets the line height */
	color: #101010; /* Sets the text color */
	text-decoration: none; /* Removes text underline */
	background-color: #fff; /* Sets the background color */
	border: 1px solid #ddd; /* Adds a border to the element */
}

/*
First Pagination Item Styling
This section adds rounded corners to the first pagination item.
*/
.bn-pagination > li:first-child > a,
.bn-pagination > li:first-child > span {
	margin-left: 0; /* Removes margin for the first item */
	border-top-left-radius: 4px; /* Rounds the top-left corner */
	border-bottom-left-radius: 4px; /* Rounds the bottom-left corner */
}

/*
Last Pagination Item Styling
This section adds rounded corners to the last pagination item.
*/
.bn-pagination > li:last-child > a,
.bn-pagination > li:last-child > span {
	border-top-right-radius: 4px; /* Rounds the top-right corner */
	border-bottom-right-radius: 4px; /* Rounds the bottom-right corner */
}

/*
Hover & Focus State Styling
This section styles the hover and focus states for pagination links and spans, making them more interactive.
*/
.bn-pagination > li > a:hover,
.bn-pagination > li > span:hover,
.bn-pagination > li > a:focus,
.bn-pagination > li > span:focus {
	z-index: 2; /* Brings the element to the front on hover/focus */
	color: #101010; /* Keeps the text color consistent */
	background-color: #eee; /* Changes background color on hover/focus */
	border-color: #ddd; /* Changes border color on hover/focus */
}

/*
Active State Styling
This section styles the active pagination item, making it appear disabled and unclickable.
*/
.bn-pagination > .active > a,
.bn-pagination > .active > span,
.bn-pagination > .active > a:hover,
.bn-pagination > .active > span:hover,
.bn-pagination > .active > a:focus,
.bn-pagination > .active > span:focus {
	z-index: 3; /* Brings the active element to the front */
	color: #101010; /* Sets text color */
	cursor: default; /* Changes the cursor to default, indicating it's unclickable */
	background-color: #e6e6e6; /* Changes background color for active state */
	border-color: #e6e6e6; /* Matches the border color with the background */
}

/*
Disabled State Styling
This section styles disabled pagination items, indicating they are unclickable.
*/
.bn-pagination > .disabled > span,
.bn-pagination > .disabled > span:hover,
.bn-pagination > .disabled > span:focus,
.bn-pagination > .disabled > a,
.bn-pagination > .disabled > a:hover,
.bn-pagination > .disabled > a:focus {
	color: #777; /* Sets a gray color for disabled text */
	cursor: not-allowed; /* Changes the cursor to indicate it's unclickable */
	background-color: #fff; /* Keeps the background color consistent */
	border-color: #ddd; /* Keeps the border color consistent */
}