[data-theme="dark"] .bn-pagination {
	background: transparent;
}

[data-theme="dark"] .bn-pagination>li>a,
[data-theme="dark"] .bn-pagination>li>span {
	color: var(--dark-text);
	background-color: var(--color-surface-high);
	border-color: var(--divider);
}

[data-theme="dark"] .bn-pagination>li>a:hover,
[data-theme="dark"] .bn-pagination>li>span:hover,
[data-theme="dark"] .bn-pagination>li>a:focus,
[data-theme="dark"] .bn-pagination>li>span:focus {
	color: var(--dark-text);
	background-color: var(--color-surface-hover);
	border-color: var(--divider);
}

[data-theme="dark"] .bn-pagination>.active>a,
[data-theme="dark"] .bn-pagination>.active>span,
[data-theme="dark"] .bn-pagination>.active>a:hover,
[data-theme="dark"] .bn-pagination>.active>span:hover,
[data-theme="dark"] .bn-pagination>.active>a:focus,
[data-theme="dark"] .bn-pagination>.active>span:focus {
	color: #ffffff;
	background-color: var(--primary-color);
	border-color: var(--primary-color);
}

[data-theme="dark"] .bn-pagination>.disabled>span,
[data-theme="dark"] .bn-pagination>.disabled>span:hover,
[data-theme="dark"] .bn-pagination>.disabled>span:focus,
[data-theme="dark"] .bn-pagination>.disabled>a,
[data-theme="dark"] .bn-pagination>.disabled>a:hover,
[data-theme="dark"] .bn-pagination>.disabled>a:focus {
	color: var(--mid-gray-text);
	background-color: var(--color-surface);
	border-color: var(--divider);
}

/*
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 */
}