// 钻头小爱丽丝风格的 样式配置

@use "../tools/tools.scss" as tools;
@use "./variables.scss" as drillVariables;

@import "./hope-use-config.scss";
@import "./hope-use-palette.scss";

// 爱丽丝样式 对基础版本的样式做拓展与覆盖
@import "../common/index.scss";

// 圆角-小
$border-radius-mini: 0.5rem;

// 圆角-大
$border-radius-large: 1rem;

// 设置全体的滚动条样式 用小爱丽丝的颜色
@include tools.setScrollbar(drillVariables.$alice-yellow, drillVariables.$drill-main-color);

// 间距 和 标识线 用小爱丽丝的颜色
@include tools.setSidebarIndicatrix(drillVariables.$drill-dark-color);

// 直接去设置css变量 避免自己用户直接使用 hope-use-palette 和 hope-use-config
:root {
	--vp-c-accent: #{$vp-c-accent};
	--vp-c-accent-bg: #{$vp-c-accent-bg};
	--vp-c-accent-hover: #{$vp-c-accent-hover};
	--vp-c-bg: #{$vp-c-bg};
	--vp-c-bg-soft: rgba($vp-c-bg, 0.9);
	--vp-c-bg-elv-soft: rgba($vp-c-bg, 0.9);
}

hr {
	border-top: none;
	border-top: 2px dotted var(--border-color);
}

// 不提供箭头了 太难看了
// 顶部导航栏
// .vp-breadcrumb ol {
// 	display: flex;
// 	flex-direction: row;
// 	li {
// 		display: inline-flex;
// 		flex-direction: row;
// 		$size: 1rem;
// 		$height: 2.5 * $size;
// 		line-height: $height;
// 		height: $height;
// 		$padding: $size;
// 		// 箭头
// 		@mixin arrow($color) {
// 			&::before {
// 				content: "";
// 				display: inline-block;
// 				width: 20px;
// 				height: 100%;
// 				background-color: $color;
// 				bottom: 0 !important;
// 				margin-inline-end: 0 !important;
// 				clip-path: polygon(100% 0, 100% 100%, 0 100%, 100% 50%, 0 0);
// 			}
// 			&::after {
// 				content: "";
// 				display: inline-block;
// 				width: 20px;
// 				height: 100%;
// 				background-color: $color;
// 				clip-path: polygon(100% 50%, 0 0, 0 100%);
// 			}
// 		}
// 		a.route-link {
// 			display: flex;
// 			color: drillVariables.$drill-black;
// 			// 清除全部间距
// 			padding: 0 0;
// 			padding-right: 0;
// 			height: 100%;
// 			width: 100%;
// 			span {
// 				display: inline-block;
// 				padding-left: 0.5rem;
// 			}
// 		}
// 		// 全部
// 		&:nth-child(n) .route-link {
// 			@include arrow(drillVariables.$drill-main-color);
// 			span {
// 				background-color: drillVariables.$drill-main-color;
// 			}
// 		}
// 		// 不提供根据次序实现的颜色差异。
// 		// &:nth-child(3n + 1) .route-link {
// 		// 	@include arrow($drill-yellow);
// 		// 	span {
// 		// 		background-color: $drill-yellow;
// 		// 	}
// 		// }
// 		// &:nth-child(3n + 2) .route-link {
// 		// 	@include arrow($drill-main-color);
// 		// 	span {
// 		// 		background-color: $drill-main-color;
// 		// 	}
// 		// }
// 		// &:nth-child(3n + 3) .route-link {
// 		// 	@include arrow($drill-main-color);
// 		// 	span {
// 		// 		background-color: $drill-main-color;
// 		// 	}
// 		// }
// 		&:last-child a {
// 			// padding-inline-end: $padding;
// 		}
// 	}
// }

.vp-breadcrumb {
	padding-inline: 0;
}

.vp-page-title {
	padding-inline: 0;
}

// 正文
.theme-hope-content {
	background-color: drillVariables.$drill-content-bgc;
	border-radius: $border-radius-large;
	color: drillVariables.$drill-black;

	padding: 0 25px;
	padding-top: 10px !important;
	padding-bottom: 30px;

	&:not(.custom) {
		padding: 0 25px;
		padding-top: 10px !important;
		padding-bottom: 30px;
	}

	h1,
	h2,
	h3,
	h4 {
		color: drillVariables.$drill-black;
	}

	a:not(.header-anchor) {
		color: drillVariables.$drill-black;
		text-decoration: underline;

		&:hover {
			color: drillVariables.$drill-orange;
		}
	}
}

// a标签
.external-link-icon .theme-hope-content {
	a {
		&[href*="://"],&[target=_blank]
		{
			// position: relative;

			&:not(.no-external-link-icon) {
				&::after {
					font-size: 1rem;
					width: 1rem;
					height: 1rem;
					background-color: drillVariables.$drill-white;
				}

				&:hover::after {
					// TODO: 实现图标变化的动效
					// font-size: 1.5rem;
					// width: 1.5rem;
					// height: 1.5rem;
					// background-color: $drill-white;
				}
			}
		}
	}
}

// 左侧边栏
aside.vp-sidebar {
	.vp-sidebar-link {
		&.active {
			color: drillVariables.$drill-black;
			font-weight: bolder;
			background-color: drillVariables.$alice-yellow;
		}

		&:hover {
			background-color: drillVariables.$drill-main-color;
		}
	}
}

// 右侧边栏
aside#toc {
	.vp-toc-header {
		display: inline;
		background-color: drillVariables.$drill-main-color;
		padding: 0.5rem 1rem !important;

		border-radius: $border-radius-large;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;

		color: white;
	}

	@include tools.setScrollbar(drillVariables.$alice-yellow, drillVariables.$drill-main-color);

	.vp-toc-wrapper {
		$text-color: drillVariables.$drill-black;

		color: $text-color;
		background-color: drillVariables.$drill-main-color;
		border-radius: $border-radius-large;
		border-top-left-radius: 0;

		margin: 0 !important;
		padding: 1rem 1rem;
		padding-top: 0.5rem;

		&.open {
			margin-top: 0 !important;
			padding-bottom: 1rem;
		}

		&::before {
			width: 1rem;
		}

		.vp-toc-marker {
			width: 1rem;
			clip-path: ellipse(100% 50% at 0% 50%);
			background-color: drillVariables.$alice-yellow;
			inset-inline-start: 0;
		}

		.vp-toc-item {
			.vp-toc-link {
				color: $text-color;
			}

			& .active {
				.vp-toc-link {
					font-weight: bolder;
				}
			}
		}

		// 移除掉多余的黑色点块
		li:not(.vp-toc-item) {
			&::marker {
				content: "";
			}
		}
	}
}