@use './custom';

:root {
	--vp-c-accent-bg: var(--vp-c-accent);
	--vp-c-accent-hover: color-mix(
		in srgb,
		var(--vp-c-accent) 90%,
		var(--vp-c-bg)
	);
	--vp-c-accent-text: color-mix(
		in srgb,
		var(--vp-c-accent) 50%,
		var(--vp-c-bg)
	);

	// tip colors
	--tip-c-accent: var(--vp-c-accent);
	--tip-c-text: var(--vp-c-accent);
	--tip-c-soft: color-mix(in srgb, var(--vp-c-accent) 10%, transparent);

	// text colors
	--vp-c-text: black;

	// border colors
	--vp-c-border: var(--vp-c-text);
	--vp-c-border-hard: var(--vp-c-border);
	--vp-c-gutter: var(--vp-c-border);

	// font family
	--font-family: 'Geist', a-otf-gothic-bbb-pr6n, 游ゴシック体, 'Yu Gothic',
		YuGothic, 'Hiragino Kaku Gothic ProN', Osaka, 'ＭＳ Ｐゴシック', sans-serif;
	--code-font-family: 'Geist Mono', monospace !important;

	// custom variables
	--border-radius: 6px;
}

[data-theme='dark'] {
	// text colors
	--vp-c-text: white;
}

// Navbar
.vp-navbar {
	border-bottom: none;

	.vp-site-name {
		font-family: var(--code-font-family);
		font-weight: 500;
	}
}

.vp-navbar-item {
	* {
		font-weight: 400;
		font-family: var(--code-font-family);
	}

	a[aria-label='GitHub'] {
		width: 1.4em;
		overflow: hidden;
		vertical-align: middle;
		background: none;

		&:before {
			display: inline-block;
			content: '';
			width: 1.4em;
			height: 1.4em;
			background: currentColor;
			margin-bottom: 0.2em;
			mask: url('/github-mark.svg') no-repeat;
			mask-size: 100% 100%;
			vertical-align: middle;
		}

		@media (max-width: 719px) {
			width: auto;

			&:before {
				display: none;
			}
		}
	}
}

.toggle-color-mode-button {
	opacity: 1;
}

@layer vp, tweeq;

@layer vp {
	[vp-content] {
		:is(h2, h3):not(:where(:is(h1, h2) + *)) {
			margin-top: calc(3rem - var(--header-offset)) !important;
		}

		a:not(.header-anchor) {
			font-weight: inherit;
			text-decoration-thickness: 0.5px;
			text-underline-offset: 2px;

			&:has(img) {
				&:after {
					content: '';
					display: none !important;
				}
			}
		}

		// Code
		code {
			padding: 0 0.2em;
			background: transparent;
		}

		// Paragraph
		p,
		ul,
		ol,
		dl {
			line-height: 1.8 !important;
			margin-block: 1lh;
		}

		// List
		:is(ul, ol, dl) {
			margin: 1em 0;
		}

		li {
			list-style: none;
			margin-bottom: 0.5em;

			&:before {
				content: '❊';
				color: var(--vp-c-text-quote);
				display: inline-block;
				width: 1em;
				margin-left: -0.5em;
				margin-right: 0.3em;
			}

			:is(ul, ol, dl) {
				margin: 0.5em 0;
			}
		}

		li li:before {
			content: '-';
		}

		svg.iconify {
			vertical-align: middle;
			margin: 0 0.2em 0.1em;
		}
	}
}

// Table
tr:nth-child(2n) {
	background-color: transparent;
}

th:nth-child(3) {
	min-width: 15em;
}

table {
	border-collapse: separate;
	border-spacing: 0;
}

:is(th, td) {
	&:not(:last-child) {
		border-right: 0;
	}

	&:not(:first-child) {
		border-left: 0;
	}
}

th {
	text-align: left;
}

th,
tr:not(:last-child) td {
	border-bottom: 0;
}
th:first-child {
	border-top-left-radius: var(--border-radius);
}
th:last-child {
	border-top-right-radius: var(--border-radius);
}

tr:last-child {
	td:first-child {
		border-bottom-left-radius: var(--border-radius);
	}
	td:last-child {
		border-bottom-right-radius: var(--border-radius);
	}
}

tr {
	background-color: transparent !important;
}

td code {
	padding-left: 0;
	padding-right: 0;
}

// Sidebar
.vp-sidebar {
	border-right: none;

	li li li {
		font-family: var(--code-font-family);
		font-size: 0.9em;
	}
}

.vp-sidebar-item.vp-sidebar-heading {
	font-weight: 500;
}

.vp-sidebar-item:not(.vp-sidebar-heading) {
	padding-left: 1.25rem;
}
