// todo - Remove all !important

$header-height: 1.5rem;

$ease-close: cubic-bezier(0.56, 0.48, 0.16, 1);
$ease-open: cubic-bezier(0.08, 1.12, 0.3, 0.97);

$max-height: 80vh;

:root[theme='light'] {
	.code-window {
		background: color-mix(in lch, var(--dark-b), var(--dark-d));
	}
}

.code-window {
	box-sizing: border-box;

	position: relative;

	min-width: 10rem;
	width: clamp(20rem, 100%, 90vw);

	height: var(--code-height, fit-content);
	max-height: $max-height;

	background: var(--bg, var(--dark-a, #15161d));
	backdrop-filter: blur(0.5rem);
	-webkit-backdrop-filter: blur(0.5rem);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);

	font-size: 0.8rem;
	text-align: var(--text-align, left);

	overflow: hidden;
	cursor: default;

	clip-path: inset(-20%);

	transition: clip-path 0.25s;
	transition-timing-function: $ease-open;
	&:has(.collapsed) {
		transition-timing-function: $ease-close;
		clip-path: inset(-20% -20% calc(100% - $header-height) -20%);
	}

	code {
		padding: 0;
	}

	.codeblock {
		box-sizing: border-box;

		position: relative;
		display: flex;
		flex-direction: column;
		flex-shrink: 1;
		flex-grow: 1;

		width: 100%;
		height: 100%;

		margin: 0;

		overflow-y: auto;
	}

	.nav {
		display: flex;
		justify-content: center;
		align-items: center;

		height: $header-height;

		background: var(--bg-b, #282a36);

		font-family: var(--font-a);

		.dots {
			position: absolute;
			top: 0.55rem;
			left: 0.55rem;

			display: flex;
			gap: 0.3rem;

			width: 2rem;
			height: 0.5rem;

			$red: var(--red, #ff605c);
			$yellow: var(--yellow, #febc2e);
			$green: var(--green, #28c941);

			filter: saturate(0.5);
			transition: filter 0.1s;

			.dot {
				all: unset;
				// cursor: pointer;
				min-width: 0.5rem;
				min-height: 0.5rem;

				border-radius: 1rem;

				outline-offset: 0px;
				transition: 0.2s;

				&.red {
					background: $red;
				}
				&.yellow {
					background: $yellow;
				}
				&.green {
					background: $green;
				}

				&:focus {
					scale: 1.1;
				}
			}
		}

		.title {
			color: var(--fg-d, #dfe1e9);
			transition: color 0.15s;
		}

		&:active {
			cursor: grabbing;
		}
	}

	&:hover {
		.dots {
			filter: saturate(1);
		}

		.title {
			color: var(--fg-c, #c3c4c7);
		}
	}
}

.shiki.has-focused {
	.line {
		transition: 0.25s;
	}

	.line {
		filter: blur(1px) saturate(0.5) brightness(0.8);
	}

	.line.focused {
		filter: blur(0) saturate(1) brightness(1);
		font-variation-settings: 'wght' 700;
	}
}

.has-focused:hover .line {
	filter: none;
}

.shiki .line.focused {
	filter: none;
}

pre.shiki-wrapper {
	height: var(--height, 100%);
	max-height: $max-height;
	padding: 0 1rem;
	margin: 0;

	box-shadow: var(--shadow) inset;
	overflow: auto;

	--padding: clamp(0.5rem, 1.5vw, 1rem);

	code {
		box-shadow: none;
	}

	@media screen and (width < 1000px) {
		// padding: 0 0.5rem;
		padding: 0 var(--padding);

		pre.shiki {
			padding: 0;
			// margin: 0.33rem 0;
			margin: calc(var(--padding) * 0.85) 0;
			margin-bottom: calc(var(--padding) * 1.85);
		}
	}
}

.sticky {
	position: absolute;
	right: 0rem;
	top: 0rem;

	display: flex;
	align-items: center;
	justify-content: center;

	z-index: 1;
}

// @defaultValue text
pre.shiki code span.line {
	margin-left: auto;
}

////// Scrollbars //////

pre.shiki {
	overflow-x: visible;
	cursor: auto;
	user-select: text;
	::selection {
		background: color-mix(in lch, var(--dark-b), var(--dark-c) 20%);
	}
}

$scrollbar-width: 7px;
pre.shiki-wrapper {
	scrollbar-gutter: stable;
}
pre.shiki-wrapper::-webkit-scrollbar {
	height: $scrollbar-width;
	width: $scrollbar-width;

	border-radius: 0.25rem;
	background: transparent; /* make scrollbar transparent */
}
pre.shiki-wrapper::-webkit-scrollbar-thumb {
	background: var(--bg-b);
	border-radius: 0.125rem;

	cursor: pointer;
}
pre.shiki-wrapper::-webkit-scrollbar-corner {
	background: transparent;
}

.shiki {
	filter: brightness(0.9);

	&:focus {
		filter: brightness(1.1);

		border: none;
		border-radius: 0.1px !important;
		outline: none;
	}
	&:focus-visible {
		outline: 1px solid var(--focus-outline-color);
		outline-offset: 7px;
	}
}
html[theme='light'] .shiki {
	filter: brightness(1.1);
}

div.code-window > div.codeblock > pre > pre > code,
div.code-window > div.codeblock > * {
	font-family: var(--font-mono);
	font-size: var(--font-size, var(--font));
	line-height: var(--line-height, 1.1rem);
	font-variation-settings: 'wght' 500;
}

.btn {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;

	font-size: var(--font-xs);
	font-variation-settings:
		'wght' 500,
		'wdth' 100;

	color: var(--fg-d);
	background: color-mix(in hsl, var(--bg-b), var(--bg-c) 30%);
	outline: 1px solid var(--bg-b);
	border: none;

	cursor: pointer;

	transition: background 0.2s;

	&:hover,
	&.active {
		color: var(--fg-b);
		background: color-mix(in hsl, var(--bg-b), var(--bg-c) 80%);
	}

	&:focus-visible {
		outline-color: var(--focus-outline-color) !important;
	}
}

[theme='light'] {
	.btn {
		color: var(--fg-d);
		background: color-mix(in lab, var(--bg-c), var(--bg-a) 20%);
		&:hover {
			outline-color: var(--bg-c);
		}
		&:hover,
		&.active {
			background: color-mix(in lab, var(--bg-c), var(--bg-a) 50%);
		}
	}
}
