/* 浅色主题 */
[data-bs-theme="light"] {
	--body-bg: #fff;
	--body-color: #212529;
	--success: #198754;
	--danger: #dc3545;
	--badge-color: #6c757d;
	--badge-bg: #e9ecef;
	--link-color: #198754;
	--page-link-bg: #f8f9fa;
	--page-link-color: #212529;
	--page-link-border: #dee2e6;
	--page-link-active-bg: #198754;
	--page-link-active-color: #fff;
	--text-color: #000;
	--btn-bg: #f8f9fa;
	--btn-border-color: #f8f9fa;
	--btn-hover-color: #000;
	--btn-hover-bg: #d3d4d5;
	--btn-hover-border-color: #c6c7c8;
	--btn-focus-shadow-rgb: 211, 212, 213;
	--btn-active-color: #000;
	--btn-active-bg: #c6c7c8;
	--btn-active-border-color: #babbbc;
	--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--btn-disabled-color: #d3d4d5;
	--btn-disabled-bg: #f8f9fa;
	--btn-disabled-border-color: #f8f9fa;
	--code-header-bg: #f8f9fa;
	--code-line-color: #6c757d;
	--box-shadow-rgba: rgba(0, 0, 0, 0.3);
	--toast-bg: #fff;
	--toast-color: #212529;
	--toast-border: #dee2e6;
	--dropdown-bg: #d3d4d5;
	--dropdown-color: #212529;
	--dropdown-border-color: #f8f9fa;
	--dropdown-hover-border-color: #c6c7c8;
	--dropdown-active-border-color: #babbbc;
	--dropdown-item-bg-hover: #e9ecef;
	--dropdown-item-bg-active: #d3d4d5;
	--border-color: #dee2e6;
	--text-bg-success-color: #fff;
	--text-bg-success-hover-color: #d3d4d5;
}

/* 深色主题 */
[data-bs-theme="dark"] {
	--body-bg: #212529;
	--body-color: #f8f9fa;
	--success: #2ea043;
	--danger: #bb2d3b;
	--badge-color: #f8f9fa;
	--badge-bg: #495057;
	--link-color: #4dc374;
	--page-link-bg: #343a40;
	--page-link-color: #f8f9fa;
	--page-link-border: #495057;
	--page-link-active-bg: #2ea043;
	--page-link-active-color: #f8f9fa;
	--text-color: #fff;
	--btn-bg: #343a40;
	--btn-border-color: #343a40;
	--btn-hover-color: #fff;
	--btn-hover-bg: #424649;
	--btn-hover-border-color: #373b3e;
	--btn-focus-shadow-rgb: 66, 70, 73;
	--btn-active-color: #fff;
	--btn-active-bg: #4d5154;
	--btn-active-border-color: #373b3e;
	--btn-active-shadow: inset 0 3px 5px rgba(255, 255, 255, 0.125);
	--btn-disabled-color: #d3d4d5;
	--btn-disabled-bg: #343a40;
	--btn-disabled-border-color: #343a40;
	--code-header-bg: #343a40;
	--code-line-color: #495057;
	--box-shadow-rgba: rgba(255, 255, 255, 0.3);
	--toast-bg: #343a40;
	--toast-color: #f8f9fa;
	--toast-border: #495057;
	--dropdown-bg: #424649;
	--dropdown-color: #f8f9fa;
	--dropdown-border-color: #212529;
	--dropdown-hover-border-color: #373b3e;
	--dropdown-active-border-color: #373b3e;
	--dropdown-item-bg-hover: #495057;
	--dropdown-item-bg-active: #2c3034;
	--border-color: #495057;
	--text-bg-success-color: #212529;
	--text-bg-success-hover-color: #2c3034;
}

/* 自定义主题按钮图标 */
#theme-toggle {
	font-size: 1.2rem;
}

/* 自定义下拉菜单 */
.dropdown-menu {
	min-width: max-content;
	max-width: 10rem;
	width: 6rem;
}

/* 自定义下拉菜单选项 */
.dropdown-item:active {
	color: var(--dropdown-color);
	background-color: var(--dropdown-item-bg-active);
}

.dropdown-item.active {
	color: var(--body-bg);
	background-color: var(--success);
}

.dropdown-item:hover {
	text-decoration: none;
}

/* 自定义 badge */
.badge {
	color: var(--badge-color);
	background-color: var(--badge-bg);
}

/* 自定义 toast */
.toast {
	color: var(--toast-color);
	background-color: var(--toast-bg);
	border-color: var(--toast-border);
	z-index: 1030;
}

/* 自定义分页按钮 */
.page-link {
	color: var(--page-link-color);
	background-color: var(--page-link-bg);
	border-color: var(--page-link-border);
}

.page-link:hover {
	background-color: color-mix(in srgb, var(--page-link-bg) 60%, var(--success));
	color: var(--page-link-color);
	border-color: var(--page-link-border);
	text-decoration: none;
}

.page-link:focus {
	color: var(--page-link-color);
}

.page-item.active .page-link {
	background-color: var(--page-link-active-bg);
	color: var(--page-link-active-color);
	border-color: var(--page-link-active-bg);
}

.page-item.disabled .page-link {
	background-color: var(--page-link-bg);
	color: color-mix(in srgb, var(--page-link-color) 60%, var(--page-link-bg));
	border-color: var(--page-link-border);
}

/* 自定义链接 */
a {
	color: var(--link-color);
	text-decoration: none;
}

a:hover {
	color: var(--success);
	text-decoration: underline var(--success);
}

a.text-link {
	color: var(--text-color);
	text-decoration: none;
}

a.text-link:hover {
	color: color-mix(in srgb, var(--text-color) 60%, var(--body-bg));
}

a.button-link {
	text-decoration: none;
}

a.button-link:hover {
	text-decoration: none;
}

/* 自定义次级导航按钮样式 */
.nav .nav-link {
	color: var(--body-color);
	background-color: var(--body-bg);
}

.nav .nav-link.active {
	color: var(--body-bg);
	background-color: var(--success);
}

.nav .nav-link:hover {
	text-decoration: none;
}

/* 自定义图片样式 */
.card-img-top {
	max-width: 96px;
}

.card-img {
	max-width: 192px;
}

.img-logo {
	width: 48px;
}

.img-title {
	height: 64px;
	max-width: 128px;
}

.img-bg {
	width: 256px;
}

table img {
	width: 2rem;
}

.button-icon {
	height: 1.5rem;
	width: auto;
}

/* 设置博客缩略图、商店卡片悬停阴影效果 */
.img-thumbnail:hover,
.card-block:hover {
	box-shadow: 0 8px 16px 4px var(--box-shadow-rgba);
	transition: all 0.3s ease;
}

/* 图标悬停平滑过渡效果 */
.text-icon i,
.text-icon img {
	transition: transform 0.3s ease-in-out;
}

.text-icon img {
	width: 1.5rem;
}

/* 图标悬停缩放效果 */
.text-icon:hover img,
.text-icon:hover i {
	transform: scale(1.3);
}

/* 设置搜索框属性 */
.form-control:focus,
.page-link:focus,
.form-select:focus {
	border-color: var(--border-color);
	box-shadow: 0 0 10px 4px rgba(25, 135, 84, 0.3);
}

/* 页脚链接类属性 */
a.footer-link {
	color: white;
	text-decoration: none;
}

a.footer-link:hover {
	text-decoration: underline white;
}

.no-resize {
	resize: none;
}

/* 设置语言按钮国旗图片 */
.language-button img {
	width: 1.2rem;
}

/* 代码块样式 */
.code-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
	background: var(--code-header-bg);
	border-top-left-radius: 0.5rem;
	border-top-right-radius: 0.5rem;
}

pre>code {
	border-radius: 0 0 0.25rem 0.25rem;
}

.copy-btn {
	cursor: pointer;
	color: var(--text-color);
	background: none;
	border: none;
}

/* 让行号和代码块高度一致 */
.hljs {
	display: flex;
	align-items: stretch;
}

/* 行号字体、颜色和大小 */
.hljs-ln-numbers {
	min-width: 2rem;
	max-width: 3rem;
	color: var(--code-line-color);
	font-family: monospace;
	font-size: 0.9rem;
	border-right: 1.6px solid var(--border-color);
	user-select: none;
}

/* 鼠标悬停时改变行号颜色 */
.hljs-ln-numbers:hover {
	color: var(--success);
	cursor: pointer;
}

.hljs-line-numbers table {
	margin: 0;
	padding: 0;
	border-spacing: 0;
	width: 100%;
}

/* 代码块左边距与行号保持一致 */
.hljs-ln-code {
	padding-left: 0.8rem !important;
}

/* 最新博客右上角图标属性 */
.new-icon {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	color: var(--badge-color);
}

/* 固定在底部并100%显示 */
.bottom-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	max-width: 100%;
}

/* 定义text-bg-success样式 */
.text-bg-success {
	color: var(--body-bg) !important;
	background-color: var(--success) !important;
}

/* 设置返回按钮样式 */
#back-to-top {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.8s ease;
	z-index: 1050;
}

/*强制设置list-group-item的z-index 值，避免覆盖返回按钮*/
.list-group .list-group-item:hover,
.list-group .list-group-item-action:hover {
    z-index: 0 !important;
}

/* 定义btn-light样式以适应浅色、深色主题 */
.btn-light {
	color: var(--text-color);
	background-color: var(--btn-bg);
	border-color: var(--btn-border-color);
}

.btn-light:hover {
	color: var(--btn-hover-color) !important;
	background-color: var(--btn-hover-bg);
	border-color: var(--btn-hover-border-color);
}

.btn-light:active,
.btn-light.active {
	color: var(--btn-active-color) !important;
	background-color: var(--btn-active-bg) !important;
	border-color: var(--btn-active-border-color) !important;
}

.btn-light:disabled,
.btn-light.disabled {
	color: var(--btn-disabled-color);
	background-color: var(--btn-disabled-bg);
	border-color: var(--btn-disabled-border-color);
}

.btn-light:focus {
	box-shadow: inset 0 3px 5px var(--btn-focus-shadow-rgb);
}

.btn-light.dropdown-toggle.show {
	color: var(--dropdown-color);
	background-color: var(--dropdown-bg);
	border-color: var(--dropdown-active-border-color);
}

.btn-light.dropdown-toggle.show:focus {
	border-color: var(--dropdown-active-border-color);
	box-shadow: none;
}

.btn-success {
	color: var(--text-bg-success-color);
	background-color: var(--success);
}

.btn-success:hover {
	color: var(--text-bg-success-hover-color);
}

.btn-success:active,
.btn-success.active {
	color: var(--text-bg-success-color) !important;
}