@use 'sass:meta';
@use '../../shared/styles/theme';
@use '../../shared/styles/utils';
@use '../../shared/styles/icons/utils' as iconUtils;
@use '../../shared/base';
@include meta.load-css('../../../../../node_modules/@gitkraken/gitkraken-components/dist/styles.css');

@mixin focusStyles() {
	outline: var(--gl-border-width) solid var(--vscode-focusBorder);
	outline-offset: -1px;
}

@include utils.dark-theme {
	--popover-bg: var(--color-background--lighten-15);

	// --titlebar-bg: var(--color-background--lighten-075);
	--titlebar-bg: var(--color-background);
}

@include utils.light-theme {
	--popover-bg: var(--color-background--darken-15);

	// --titlebar-bg: var(--color-background--darken-075);
	--titlebar-bg: var(--color-background);
}

:root {
	--titlebar-fg: var(--color-foreground--65);
	--color-graph-contrast-border: var(--vscode-list-focusOutline);
	--color-graph-selected-row: var(--vscode-list-activeSelectionBackground);
	--color-graph-hover-row: var(--vscode-list-hoverBackground);
	--color-graph-text-selected-row: var(--vscode-list-activeSelectionForeground);
	--color-graph-text-dimmed-selected: color-mix(
		in srgb,
		transparent 50%,
		var(--vscode-list-activeSelectionForeground)
	);
	--color-graph-text-selected: var(--vscode-editor-foreground, var(--vscode-foreground));
	--color-graph-text-dimmed: color-mix(in srgb, transparent 80%, var(--color-graph-text-selected));
	--color-graph-actionbar-selectedBackground: var(--vscode-toolbar-hoverBackground);

	--color-graph-text-hovered: var(--vscode-list-hoverForeground);
	--color-graph-text-normal: color-mix(in srgb, transparent 15%, var(--color-graph-text-selected));
	--color-graph-text-secondary: color-mix(in srgb, transparent 35%, var(--color-graph-text-selected));
	--color-graph-text-disabled: color-mix(in srgb, transparent 50%, var(--color-graph-text-selected));

	--color-graph-stats-added: var(--vscode-gitlens-graphChangesColumnAddedColor);
	--color-graph-stats-deleted: var(--vscode-gitlens-graphChangesColumnDeletedColor);
	--color-graph-stats-files: var(--vscode-gitDecoration-modifiedResourceForeground);

	--color-graph-minimap-line0: var(--vscode-progressBar-background);
	--color-graph-minimap-focusLine: var(--vscode-foreground);

	--color-graph-minimap-marker-head: var(--vscode-gitlens-graphMinimapMarkerHeadColor);
	--color-graph-scroll-marker-head: var(--vscode-gitlens-graphScrollMarkerHeadColor);
	--color-graph-minimap-marker-upstream: var(--vscode-gitlens-graphMinimapMarkerUpstreamColor);
	--color-graph-scroll-marker-upstream: var(--vscode-gitlens-graphScrollMarkerUpstreamColor);
	--color-graph-minimap-marker-worktree: var(--vscode-gitlens-graphMinimapMarkerWorktreeColor);
	--color-graph-minimap-marker-highlights: var(--vscode-gitlens-graphMinimapMarkerHighlightsColor);
	--color-graph-scroll-marker-highlights: var(--vscode-gitlens-graphScrollMarkerHighlightsColor);
	--color-graph-minimap-marker-local-branches: var(--vscode-gitlens-graphMinimapMarkerLocalBranchesColor);
	--color-graph-scroll-marker-local-branches: var(--vscode-gitlens-graphScrollMarkerLocalBranchesColor);
	--color-graph-minimap-marker-pull-requests: var(--vscode-gitlens-graphMinimapMarkerPullRequestsColor);
	--color-graph-scroll-marker-pull-requests: var(--vscode-gitlens-graphScrollMarkerPullRequestsColor);
	--color-graph-minimap-marker-remote-branches: var(--vscode-gitlens-graphMinimapMarkerRemoteBranchesColor);
	--color-graph-scroll-marker-remote-branches: var(--vscode-gitlens-graphScrollMarkerRemoteBranchesColor);
	--color-graph-minimap-marker-stashes: var(--vscode-gitlens-graphMinimapMarkerStashesColor);
	--color-graph-scroll-marker-stashes: var(--vscode-gitlens-graphScrollMarkerStashesColor);
	--color-graph-minimap-marker-tags: var(--vscode-gitlens-graphMinimapMarkerTagsColor);
	--color-graph-scroll-marker-tags: var(--vscode-gitlens-graphScrollMarkerTagsColor);
	--color-graph-scroll-marker-wip: var(--vscode-gitlens-graphScrollMarkerWipColor);
	--color-graph-minimap-marker-scope: var(--vscode-statusBarItem-prominentBackground, var(--vscode-foreground));
	--color-graph-minimap-marker-scope-highlight: color-mix(
		in srgb,
		var(--vscode-statusBarItem-prominentBackground) 18%,
		transparent
	);

	--color-graph-minimap-tip-headBackground: var(--color-graph-scroll-marker-head);
	--color-graph-minimap-tip-headBorder: var(--color-graph-scroll-marker-head);
	--color-graph-minimap-tip-headForeground: var(--vscode-editor-foreground, var(--vscode-foreground));

	--color-graph-minimap-tip-highlightBackground: var(--color-graph-scroll-marker-highlights);
	--color-graph-minimap-tip-highlightBorder: var(--color-graph-scroll-marker-highlights);
	--color-graph-minimap-tip-highlightForeground: var(--vscode-editor-foreground, var(--vscode-foreground));

	--color-graph-minimap-tip-branchBackground: var(--color-graph-scroll-marker-local-branches);
	--color-graph-minimap-tip-branchBorder: var(--color-graph-scroll-marker-local-branches);
	--color-graph-minimap-tip-branchForeground: var(--vscode-editor-foreground, var(--vscode-foreground));

	--color-graph-minimap-tip-remoteBackground: var(--color-graph-scroll-marker-remote-branches);
	--color-graph-minimap-tip-remoteBorder: var(--color-graph-scroll-marker-remote-branches);
	--color-graph-minimap-tip-remoteForeground: var(--vscode-editor-foreground, var(--vscode-foreground));

	--color-graph-scroll-marker-selection: var(--vscode-editorCursor-foreground);
	--color-graph-minimap-marker-selection: var(--color-graph-scroll-marker-selection);

	--color-graph-minimap-tip-stashBackground: var(--color-graph-scroll-marker-stashes);
	--color-graph-minimap-tip-stashBorder: var(--color-graph-scroll-marker-stashes);
	--color-graph-minimap-tip-stashForeground: var(--vscode-editor-foreground, var(--vscode-foreground));

	--color-graph-minimap-pullRequestBackground: var(--color-graph-scroll-marker-pull-requests);
	--color-graph-minimap-pullRequestBorder: var(--color-graph-scroll-marker-pull-requests);
	--color-graph-minimap-pullRequestForeground: var(--vscode-editor-foreground, var(--vscode-foreground));

	--color-graph-minimap-tip-tagBackground: var(--color-graph-scroll-marker-tags);
	--color-graph-minimap-tip-tagBorder: var(--color-graph-scroll-marker-tags);
	--color-graph-minimap-tip-tagForeground: var(--vscode-editor-foreground, var(--vscode-foreground));

	--color-graph-minimap-tip-upstreamBackground: var(--color-graph-scroll-marker-upstream);
	--color-graph-minimap-tip-upstreamBorder: var(--color-graph-scroll-marker-upstream);
	--color-graph-minimap-tip-upstreamForeground: var(--vscode-editor-foreground, var(--vscode-foreground));

	--color-graph-minimap-tip-worktreeBackground: var(--color-graph-minimap-marker-worktree);
	--color-graph-minimap-tip-worktreeBorder: var(--color-graph-minimap-marker-worktree);

	/* Violet bg is luminance-extreme in opposite directions per theme — using editor-background as
	   the foreground inverts correctly in both. */
	--color-graph-minimap-tip-worktreeForeground: var(--vscode-editor-background, var(--vscode-foreground));

	--graph-stats-bar-height: 40%;
	--graph-stats-bar-border-radius: var(--gl-radius-sm);

	--branch-status-ahead-foreground: var(--vscode-gitlens-decorations\.branchAheadForegroundColor);
	--branch-status-behind-foreground: var(--vscode-gitlens-decorations\.branchBehindForegroundColor);
	--branch-status-both-foreground: var(--vscode-gitlens-decorations\.branchDivergedForegroundColor);

	--graph-column-scrollbar-thickness: 14px;

	--color-graph-background: var(--vscode-editor-background, var(--color-background));
}

@include utils.dark-theme($selectorPrefix: ':root:has(', $selectorPostfix: ')') {
	--graph-theme-opacity-factor: '1';

	--color-graph-actionbar-background: color-mix(in srgb, #fff 5%, var(--color-background));
	--color-graph-background1: color-mix(in srgb, #fff 5%, var(--color-background));
	--color-graph-background2: color-mix(in srgb, #fff 10%, var(--color-background));
}

@include utils.light-theme($selectorPrefix: ':root:has(', $selectorPostfix: ')') {
	--graph-theme-opacity-factor: '0.5';

	--color-graph-actionbar-background: color-mix(in srgb, #000 5%, var(--color-background));
	--color-graph-background1: color-mix(in srgb, #000 5%, var(--color-background));
	--color-graph-background2: color-mix(in srgb, #000 10%, var(--color-background));

	.graph-container .wip-stats-pill {
		background-color: color-mix(
			in srgb,
			var(--vscode-sideBarSectionHeader-background) 96%,
			var(--vscode-foreground) 4%
		);
	}
}

// Light DOM
body {
	// formerly .graph-app
	--fs-1: 1.1rem;
	--fs-2: 1.3rem;

	padding: 0;
	overflow: hidden;

	.vertical_scrollbar,
	.horizontal_scrollbar {
		border-color: transparent;
		transition: border-color 1s linear;
	}

	&:hover,
	&:focus-within {
		.vertical_scrollbar,
		.horizontal_scrollbar {
			border-color: var(--vscode-scrollbarSlider-background);
			transition: border-color var(--gl-duration-x-fast) linear;
		}
	}
}

:focus,
:focus-within,
:focus-visible {
	outline-color: var(--vscode-focusBorder);
}

.gk-graph .graph-container:focus,
.gk-graph .graph-container:focus-within {
	outline: none;
}

::-webkit-scrollbar {
	width: var(--graph-column-scrollbar-thickness);
	height: var(--graph-column-scrollbar-thickness);
}

::-webkit-scrollbar-corner {
	background-color: transparent !important;
}

::-webkit-scrollbar-thumb {
	background-color: transparent;
	border-color: inherit;
	border-right-style: inset;
	border-right-width: calc(100vw + 100vh);
	border-radius: unset !important;

	&:hover {
		border-color: var(--vscode-scrollbarSlider-hoverBackground);
	}

	&:active {
		border-color: var(--vscode-scrollbarSlider-activeBackground);
	}
}

a {
	text-decoration: none;

	&:hover {
		text-decoration: underline;
	}
}

a,
button:not([disabled]),
[tabindex]:not([tabindex='-1']) {
	&:focus {
		@include focusStyles;
	}
}

// used in gitActionsButtons
// .pill {
// 	display: inline-block;
// 	padding: 0.2rem 0.5rem;
// 	border-radius: 0.5rem;
// 	font-size: 1rem;
// 	font-weight: 500;
// 	line-height: 1.2;
// 	text-transform: uppercase;
// 	color: var(--vscode-foreground);
// 	background-color: var(--vscode-editorWidget-background);

// 	code-icon {
// 		font-size: inherit !important;
// 		line-height: inherit !important;
// 	}
// }

// don't see usage
// .badge {
// 	font-size: 1rem;
// 	font-weight: 700;
// 	text-transform: uppercase;
// 	color: var(--color-foreground);

// 	&.is-help {
// 		cursor: help;
// 	}

// 	small {
// 		font-size: inherit;
// 		opacity: 0.6;
// 		font-weight: 400;
// 	}

// 	&-container {
// 		position: relative;
// 	}

// 	&-popover {
// 		width: max-content;
// 		right: 0;
// 		top: 100%;
// 		white-space: normal;
// 	}

// 	&:not(:hover) + &-popover {
// 		display: none;
// 	}
// }

.popover::part(body) {
	padding: 0;
	font-size: var(--vscode-font-size);
	background-color: var(--vscode-menu-background);
}

// header
// .jump-to-ref {
// 	--button-foreground: var(--color-foreground);
// }

// header
// .shrink {
// 	max-width: fit-content;
// 	transition: all 0.2s;

// 	&.hidden {
// 		max-width: 0;
// 		overflow: hidden;
// 		.titlebar__group &:not(:first-child) {
// 			// compensate the parent gap
// 			margin-left: -0.5rem;
// 		}
// 	}
// }

// switch to actionButton in graph.css.ts
// .action-button {
// 	position: relative;
// 	appearance: none;
// 	font-family: inherit;
// 	font-size: 1.2rem;
// 	line-height: 2.2rem;
// 	// background-color: var(--color-graph-actionbar-background);
// 	background-color: transparent;
// 	border: none;
// 	color: inherit;
// 	color: var(--color-foreground);
// 	padding: 0 0.75rem;
// 	cursor: pointer;
// 	border-radius: 3px;
// 	height: auto;

// 	display: grid;
// 	grid-auto-flow: column;
// 	grid-gap: 0.5rem;
// 	gap: 0.5rem;
// 	max-width: fit-content;

// 	&[disabled] {
// 		pointer-events: none;
// 		cursor: default;
// 		opacity: 1;
// 	}

// 	&:hover {
// 		background-color: var(--color-graph-actionbar-selectedBackground);
// 		color: var(--color-foreground);
// 		text-decoration: none;
// 	}

// 	&[aria-checked] {
// 		border: 1px solid transparent;
// 	}

// 	&[aria-checked='true'] {
// 		background-color: var(--vscode-inputOption-activeBackground);
// 		color: var(--vscode-inputOption-activeForeground);
// 		border-color: var(--vscode-inputOption-activeBorder);
// 	}

// 	code-icon {
// 		line-height: 2.2rem;
// 		vertical-align: bottom;
// 	}
// 	code-icon[icon='graph-line'] {
// 		transform: translateY(1px);
// 	}

// 	&__pill {
// 		.is-ahead & {
// 			background-color: var(--branch-status-ahead-pill-background);
// 		}
// 		.is-behind & {
// 			background-color: var(--branch-status-behind-pill-background);
// 		}
// 		.is-ahead.is-behind & {
// 			background-color: var(--branch-status-both-pill-background);
// 		}
// 	}

// 	&__more,
// 	&__more.codicon[class*='codicon-'] {
// 		font-size: 1rem;
// 		margin-right: -0.25rem;
// 	}

// 	code-icon#{&}__more::before {
// 		margin-left: -0.25rem;
// 	}

// 	&__indicator {
// 		margin-left: -0.2rem;
// 		--gl-indicator-color: green;
// 		--gl-indicator-size: 0.4rem;
// 	}

// 	&__small {
// 		font-size: smaller;
// 		opacity: 0.6;
// 		text-overflow: ellipsis;
// 		overflow: hidden;
// 	}

// 	&__truncated {
// 		width: 100%;
// 		overflow: hidden;
// 		text-overflow: ellipsis;
// 	}

// 	&.is-ahead {
// 		background-color: var(--branch-status-ahead-background);

// 		&:hover {
// 			background-color: var(--branch-status-ahead-hover-background);
// 		}
// 	}
// 	&.is-behind {
// 		background-color: var(--branch-status-behind-background);

// 		&:hover {
// 			background-color: var(--branch-status-behind-hover-background);
// 		}
// 	}
// 	&.is-ahead.is-behind {
// 		background-color: var(--branch-status-both-background);

// 		&:hover {
// 			background-color: var(--branch-status-both-hover-background);
// 		}
// 	}
// }

// header
// .action-divider {
// 	display: inline-block;
// 	width: 0.1rem;
// 	height: 2.2rem;
// 	vertical-align: middle;
// 	background-color: var(--titlebar-fg);
// 	opacity: 0.4;
// 	margin: {
// 		// left: 0.2rem;
// 		right: 0.2rem;
// 	}
// }

// header
// .button-group {
// 	display: flex;
// 	flex-direction: row;
// 	align-items: stretch;

// 	&:hover,
// 	&:focus-within {
// 		background-color: var(--color-graph-actionbar-selectedBackground);
// 		border-radius: 3px;
// 	}

// 	> *:not(:first-child),
// 	> *:not(:first-child) .action-button {
// 		display: flex;
// 		border-top-left-radius: 0;
// 		border-bottom-left-radius: 0;
// 	}

// 	> *:not(:first-child) .action-button {
// 		padding-left: 0.5rem;
// 		padding-right: 0.5rem;
// 		height: 100%;
// 	}

// 	// > *:not(:last-child),
// 	// > *:not(:last-child) .action-button {
// 	// 	padding-right: 0.5rem;
// 	// }

// 	&:hover > *:not(:last-child),
// 	&:active > *:not(:last-child),
// 	&:focus-within > *:not(:last-child),
// 	&:hover > *:not(:last-child) .action-button,
// 	&:active > *:not(:last-child) .action-button,
// 	&:focus-within > *:not(:last-child) .action-button {
// 		border-top-right-radius: 0;
// 		border-bottom-right-radius: 0;
// 	}

// 	// > *:not(:first-child) {
// 	// 	border-left: 0.1rem solid var(--titlebar-fg);
// 	// }
// }

// not used
// .repo-access {
// 	font-size: 1.1em;
// 	margin-right: 0.2rem;

// 	&:not(.is-pro) {
// 		filter: grayscale(1) brightness(0.7);
// 	}
// }

// used by graph component
.columns-settings {
	--column-button-height: 19px;

	height: var(--column-button-height);
	font-family: inherit;
	color: var(--color-graph-text-disabled, hsl(0deg 0% 100% / 40%));
	text-align: left;
	appearance: none;
	cursor: pointer;
	background-color: transparent;
	background-color: var(--color-graph-actionbar-background);
	border: none;
	border-radius: var(--gl-radius-sm);

	&:hover {
		color: var(--color-foreground);
		background-color: var(--vscode-toolbar-hoverBackground);
	}

	&:focus {
		@include focusStyles;
	}

	&[disabled] {
		pointer-events: none;
		opacity: 0.5;
	}

	code-icon {
		position: relative;
		font-size: var(--gl-font-sm);
	}
}

// Light DOM
.gk-graph:not(.ref-zone, .bs-tooltip) {
	width: 100%;
	height: 100%;
}

.gk-graph.bs-tooltip {
	z-index: var(--gl-z-tooltip);
}

// header
// .flex-gap {
// 	display: flex;
// 	gap: 0.5em;
// 	align-items: center;
// }

// not used
// .alert {
// 	--alert-foreground: var(--color-alert-foreground);
// 	--alert-background: var(--color-alert-infoBackground);
// 	--alert-border-color: var(--color-alert-infoBorder);
// 	--alert-hover-background: var(--color-alert-infoHoverBackground);
// 	display: flex;
// 	flex-direction: row;
// 	justify-content: flex-start;
// 	align-items: flex-start;
// 	gap: 1rem;
// 	padding: 1rem;
// 	border-radius: 0.25rem;
// 	border: 1px solid var(--alert-border-color);
// 	background-color: var(--alert-background);
// 	color: var(--alert-foreground);
// 	font-size: 1.2rem;
// 	// remove max-width and margin when converting to a web component or make it a variant/property
// 	max-width: 100rem;
// 	margin: {
// 		left: auto;
// 		right: auto;
// 	}

// 	&__icon {
// 		&,
// 		&[class*='codicon-'] {
// 			font-size: 2rem;
// 		}
// 	}

// 	&__content {
// 		flex: 1;
// 		padding-top: 0.1rem;

// 		> *:not(:first-child) {
// 			margin-top: 0.75rem;
// 		}

// 		> * {
// 			margin-bottom: 0;
// 		}

// 		& a:not([class]) {
// 			color: currentColor;
// 			font-weight: 600;
// 			text-decoration: underline;
// 		}
// 	}

// 	&__title {
// 		font-size: 1.3rem;
// 		font-weight: 600;
// 		text-transform: uppercase;
// 		margin-top: 0;
// 	}

// 	&__accent {
// 		font-size: 1.1rem;

// 		&-icon {
// 			margin-right: 0.2rem;
// 			line-height: 1.4rem;
// 			vertical-align: bottom;
// 		}
// 	}
// 	&__accent + &__accent {
// 		margin-top: 0.2rem;
// 	}

// 	&__actions {
// 		display: flex;
// 		flex-direction: row;
// 		justify-content: flex-start;
// 		gap: 0.75rem;
// 		font-size: 1.1rem;
// 	}

// 	&__dismiss {
// 		border: 1px solid transparent;
// 		background-color: transparent;
// 		color: inherit;
// 		appearance: none;
// 		width: 2rem;
// 		height: 2rem;
// 		padding: 0;
// 	}

// 	&--warning {
// 		--alert-background: var(--color-alert-warningBackground);
// 		--alert-border-color: var(--color-alert-warningBorder);
// 		--alert-hover-background: var(--color-alert-warningHoverBackground);
// 	}

// 	&--error {
// 		--alert-background: var(--color-alert-errorBackground);
// 		--alert-border-color: var(--color-alert-errorBorder);
// 		--alert-hover-background: var(--color-alert-errorHoverBackground);
// 	}

// 	&--neutral {
// 		--alert-background: var(--color-alert-neutralBackground);
// 		--alert-border-color: var(--color-alert-neutralBorder);
// 		--alert-hover-background: var(--color-alert-neutralHoverBackground);
// 	}
// }

// don't see usage
// .alert-action {
// 	display: inline-block;
// 	padding: 0.4rem 0.8rem;
// 	font-family: inherit;
// 	font-size: inherit;
// 	line-height: 1.4;
// 	text-align: center;
// 	text-decoration: none;
// 	user-select: none;
// 	background: transparent;
// 	color: var(--alert-foreground);
// 	cursor: pointer;
// 	border: 1px solid var(--alert-border-color);
// 	border-radius: 0.2rem;

// 	&:hover {
// 		text-decoration: none;
// 		color: var(--alert-foreground);
// 		background-color: var(--alert-hover-background);
// 	}
// }

// Light DOM
.graph-icon {
	display: inline-block;
	font: normal normal normal 14px/1 codicon;
	line-height: 2rem;
	vertical-align: middle;
	text-align: center;
	letter-spacing: normal;
	text-decoration: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	&.mini-icon {
		font-size: var(--gl-font-micro);
		line-height: 1.6rem;
	}
}

// Light DOM
.icon {
	&--head {
		&::before {
			font-family: codicon;

			@include iconUtils.codicon('vm');
		}
	}

	&--remote {
		&::before {
			font-family: codicon;

			@include iconUtils.codicon('cloud');
		}
	}

	&--remote-github,
	&--remote-githubEnterprise {
		&::before {
			font-family: codicon;

			@include iconUtils.codicon('github-inverted');
		}
	}

	&--remote-gitlab,
	&--remote-gitlabSelfHosted {
		&::before {
			font-family: glicons;

			@include iconUtils.glicon('provider-gitlab');
		}
	}

	&--remote-bitbucket,
	&--remote-bitbucketServer {
		&::before {
			font-family: glicons;

			@include iconUtils.glicon('provider-bitbucket');
		}
	}

	&--remote-azureDevops {
		&::before {
			font-family: glicons;

			@include iconUtils.glicon('provider-azdo');
		}
	}

	&--tag {
		&::before {
			font-family: codicon;

			@include iconUtils.codicon('tag');
		}
	}

	&--stash {
		&::before {
			font-family: codicon;

			@include iconUtils.codicon('inbox');
		}
	}

	&--check {
		&::before {
			font-family: codicon;

			@include iconUtils.codicon('check');
		}
	}

	&--warning {
		color: #de9b43;

		::before {
			font-family: codicon;

			@include iconUtils.codicon('warning');
		}
	}

	&--added {
		&::before {
			font-family: codicon;

			@include iconUtils.codicon('add');
		}
	}

	&--modified {
		&::before {
			font-family: codicon;

			@include iconUtils.codicon('edit');
		}
	}

	&--deleted {
		&::before {
			font-family: codicon;

			@include iconUtils.codicon('dash');
		}
	}

	&--renamed {
		&::before {
			font-family: codicon;

			@include iconUtils.codicon('file');
		}
	}

	&--resolved {
		&::before {
			font-family: codicon;

			@include iconUtils.codicon('pass-filled');
		}
	}

	&--hide {
		&::before {
			font-family: codicon;

			@include iconUtils.codicon('eye-closed');
		}
	}

	&--show {
		&::before {
			font-family: codicon;

			@include iconUtils.codicon('eye');
		}
	}

	&--pull-request {
		&::before {
			font-family: codicon;

			@include iconUtils.codicon('git-pull-request');
		}
	}

	&--upstream-ahead {
		&::before {
			font-family: codicon;

			@include iconUtils.codicon('arrow-up');
		}
	}

	&--upstream-behind {
		&::before {
			font-family: codicon;

			@include iconUtils.codicon('arrow-down');
		}
	}

	&--settings {
		&::before {
			font-family: codicon;

			@include iconUtils.codicon('settings-gear');
		}
	}

	&--branch {
		&::before {
			font-family: codicon;

			@include iconUtils.codicon('git-branch');
		}
	}

	&--graph {
		&::before {
			font-family: glicons;

			@include iconUtils.glicon('graph');
		}
	}

	&--commit {
		&::before {
			font-family: codicon;

			@include iconUtils.codicon('git-commit');
		}
	}

	&--author {
		&::before {
			font-family: codicon;

			@include iconUtils.codicon('account');
		}
	}

	&--datetime {
		&::before {
			font-family: glicons;

			@include iconUtils.glicon('clock');
		}
	}

	&--message {
		&::before {
			font-family: codicon;

			@include iconUtils.codicon('comment');
		}
	}

	&--changes {
		&::before {
			font-family: codicon;

			@include iconUtils.codicon('request-changes');
		}
	}

	&--files {
		&::before {
			font-family: codicon;

			@include iconUtils.codicon('file');
		}
	}

	&--worktree {
		&::before {
			font-family: glicons;

			@include iconUtils.glicon('worktrees-view');
		}
	}

	&--pin {
		&::before {
			font-family: codicon;

			@include iconUtils.codicon('pinned');
		}
	}

	&--issue-github,
	&--issue-githubEnterprise {
		&::before {
			font-family: codicon;

			@include iconUtils.codicon('issues');
		}
	}

	&--issue-gitlab,
	&--issue-gitlabSelfHosted {
		&::before {
			font-family: codicon;

			@include iconUtils.codicon('issues');
		}
	}

	&--issue-jiraCloud,
	&--issue-jiraServer {
		&::before {
			font-family: glicons;

			@include iconUtils.glicon('provider-jira');
		}
	}

	&--issue-linear {
		&::before {
			font-family: glicons;

			@include iconUtils.glicon('provider-linear');
		}
	}

	&--issue-azureDevops {
		&::before {
			font-family: codicon;

			@include iconUtils.codicon('issues');
		}
	}

	&--issue-bitbucket {
		&::before {
			font-family: codicon;

			@include iconUtils.codicon('issues');
		}
	}

	&--filter {
		&::before {
			font-family: codicon;

			@include iconUtils.codicon('filter');
		}
	}

	&--undefined-icon {
		&::before {
			font-family: codicon;

			@include iconUtils.codicon('blank');
		}
	}
}

// Header icons render at the library's expected metrics, not the global `.graph-icon`
// `14px / line-height: 2rem` which would stretch the header row.
.gk-graph .graph-header .graph-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	font-size: var(--gl-font-lg);
	line-height: 1;
}

// Vertically center every header item (zone icon, filter button, label) in the row.
// `:has()` covers both `.resizable > .contents > div > .columns-btn` and `.is-last-header
// > div > .columns-btn`. `.columns-filter-icon` uses `!important` to beat the library's
// inline `height: 22px; margin-bottom: 2px` (which overflows the padded filter button).
.gk-graph .graph-header div:has(> .columns-btn) {
	display: flex;
	align-items: center;
	height: 100%;
}

.gk-graph .graph-header .header-columns-icons {
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;

	// Swap rendered order so the filter funnel appears before the settings gear.
	// The library renders settings first in the DOM; the parent is already flex,
	// so `order` reorders them without touching the external component.
	.columns-filter {
		order: 0;
	}

	.columns-settings {
		order: 1;
	}
}

.gk-graph .graph-header .columns-filter-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: auto !important;
	margin-bottom: 0 !important;
}

.gk-graph .graph-header .columns-btn {
	align-items: center;
	margin-top: 0;
}

// In narrow columns (compact mode shrinks zone buttons to a few px) the GitLens override
// at L1290 `justify-content: center` would center a 16px icon inside a 5px box, overflowing
// left and getting clipped by `.contents { overflow: hidden }`. Pin to icon width.
.gk-graph .graph-header .columns-btn.small-btn.justify-start {
	min-width: 1.6rem;
}

// Filter button: hidden until header hover/focus or `.filtering` (active filter). Active
// state is signalled by the filled glyph alone — `.button.active`'s background and the
// library's `--text-selected` recolor are both overridden away.
// `.columns-btn.columns-filter` matches the library's `.columns-btn.small-btn` specificity
// so our padding wins on every variant (incl. the ref column's non-small-btn filter).
.gk-graph .graph-header .columns-btn.columns-filter {
	padding: var(--gl-space-2);
	margin-right: 0.3rem;
	cursor: pointer;

	&:not(.filtering) {
		opacity: 0;
		transition: opacity var(--gl-duration-x-fast) ease;

		&:hover {
			background-color: var(--vscode-toolbar-hoverBackground);
		}
	}

	&.filtering,
	&.filtering:hover {
		background-color: transparent;

		.columns-filter-icon {
			color: inherit;

			.icon--filter::before {
				@include iconUtils.codicon('filter-filled');
			}
		}
	}
}

.gk-graph .graph-header:hover .columns-filter:not(.filtering),
.gk-graph .graph-header .columns-filter:not(.filtering):focus-visible,
.gk-graph .graph-header .columns-filter:not(.filtering):focus-within {
	opacity: 1;
}

// Frost the graph rows behind the floating HEAD pill — the library paints it with a 10%
// tinted but otherwise transparent fill, which gets lost over dense lane/SHA content.
// Skip hover/focus since the library already swaps to an opaque background there.
.gk-graph .graph-component .graph-head-pill:not(:hover, :focus-visible) {
	-webkit-backdrop-filter: blur(0.6rem) saturate(1.2);
	backdrop-filter: blur(0.6rem) saturate(1.2);
}

// header - move to graph.css.ts
// .titlebar {
// 	background: var(--titlebar-bg);
// 	color: var(--titlebar-fg);
// 	padding: {
// 		left: 0.8rem;
// 		right: 0.8rem;
// 		top: 0.6rem;
// 		bottom: 0.6rem;
// 	}
// 	font-size: 1.3rem;
// 	flex-wrap: wrap;

// 	&,
// 	&__row,
// 	&__group {
// 		display: flex;
// 		flex-direction: row;
// 		align-items: center;
// 		gap: 0.5rem;

// 		> * {
// 			margin: 0;
// 		}
// 	}

// 	&,
// 	&__row {
// 		justify-content: space-between;
// 	}

// 	&__row {
// 		flex: 0 0 100%;

// 		&--wrap {
// 			display: grid;
// 			grid-auto-flow: column;
// 			justify-content: start;
// 			grid-template-columns: 1fr min-content;
// 		}
// 	}

// 	&__group {
// 		flex: auto 1 1;
// 	}

// 	&__row--wrap &__group {
// 		white-space: nowrap;

// 		&:nth-child(odd) {
// 			min-width: 0;
// 		}
// 	}

// 	&__debugging {
// 		> * {
// 			display: inline-block;
// 		}
// 	}

// 	gl-feature-badge {
// 		color: var(--color-foreground);
// 	}
// }

// gate
// gl-feature-gate gl-feature-badge {
// 	vertical-align: super;
// 	margin-left: 0.4rem;
// 	margin-right: 0.4rem;
// }

// might not need this
gl-graph-app,
gl-graph-app-wc,
// gl-graph-wrapper,
web-graph {
	display: contents;
}

// don't see usage
.graph-app {
	// --fs-1: 1.1rem;
	// --fs-2: 1.3rem;

	// padding: 0;
	// overflow: hidden;

	// &__container {
	// 	display: flex;
	// 	flex-direction: column;
	// 	height: calc(100vh - 2px); // shoot me -- the 2px is to stop the vertical scrollbar from showing up
	// 	gap: 0;
	// 	padding: 0.1rem;
	// }

	// &__banners {
	// 	flex: none;
	// 	padding: 0.5rem;
	// 	z-index: 2000;

	// 	&:empty {
	// 		display: none;
	// 	}

	// 	> *:not(:first-child) {
	// 		margin-top: 0.5rem;
	// 	}
	// }

	&__gate {
		// top: 40px; /* height of the header bar */
		padding-top: var(--gl-space-40);
	}

	// header
	// &__header {
	// 	flex: none;
	// 	z-index: 101;
	// 	// width: fit-content;
	// 	position: relative;
	// }

	// &__footer {
	// 	flex: none;
	// }

	// &__main {
	// 	flex: 1 1 auto;
	// 	overflow: hidden;
	// 	position: relative;
	// 	display: flex;
	// }

	// &__main.is-gated {
	// 	position: relative;
	// 	pointer-events: none;
	// }
}

// Light DOM
.gk-graph:not(.ref-zone, [role='tooltip']) {
	// flex: 1 1 auto;
	position: relative;
}

// Add when graph ref-zone "container" changes
// .gk-graph.ref-zone {
// 	position: absolute;
// }

// Light DOM
.gk-graph .graph-header {
	& .resizable-handle.horizontal {
		--sash-size: 4px;
		--sash-hover-size: 4px;

		z-index: var(--gl-z-sticky);
		width: var(--sash-size) !important;
		height: 100vh !important;
		border-right: none !important;

		&::after {
			position: absolute;
			top: 0.3rem;
			left: 0.1rem;
			width: var(--sash-size);
			height: 1.6rem;
			content: '';
			border-left: var(--gl-border-width) solid var(--titlebar-fg);
			opacity: 0.3;
			transition: border-color var(--gl-duration-x-fast) var(--gl-ease-out);
		}

		&::before {
			position: absolute;
			left: calc(50% - var(--sash-hover-size) / 2);
			width: 100%;
			width: var(--sash-hover-size);
			height: 100vh;
			pointer-events: none;
			content: '';
			background: transparent;
			transition: background-color var(--gl-duration-x-fast) var(--gl-ease-out);
		}

		&:hover,
		&:active {
			&::before {
				background-color: var(--vscode-sash-hoverBorder);
				transition-delay: 0.2s;
			}

			&::after {
				border-left-color: var(--vscode-sash-hoverBorder);
				transition-delay: 0.2s;
			}
		}

		&:active::after {
			position: absolute;
			top: 0;
			left: -100vw;
			z-index: var(--gl-z-sticky);
			width: 200vw;
			height: 100vh;
			content: '';
		}
	}

	.columns-btn {
		margin-top: 0.1rem;
	}

	.columns-btn.small-btn.justify-start {
		display: inline-flex;
		justify-content: center;
	}

	.columns-btn.spinner {
		margin-right: var(--gl-space-6);
	}

	.button {
		color: var(--color-graph-text-disabled, hsl(0deg 0% 100% / 40%));
		background-color: var(--color-graph-actionbar-background);
		border-radius: var(--gl-radius-sm);

		&:hover {
			color: var(--color-foreground);
			background-color: var(--vscode-toolbar-hoverBackground);
		}

		&:focus {
			@include focusStyles;
		}

		&.active,
		&.active:hover {
			color: var(--color-foreground);
			background-color: var(--vscode-toolbar-activeBackground);
		}
	}

	.graph-icon {
		color: var(--color-graph-text-disabled, hsl(0deg 0% 100% / 40%));
	}
}

// Reformat the third-party graph component's TARGET/BASE pills:
//   - Default state shows "<icon> TARGET" / "<icon> BASE".
//   - When the ref column is shrunk, the pill collapses to icon-only.
// The pill itself stays flex-shrink: 0 so it never gets squished; the
// container query on the .flex parent (which has the column-width inline
// style) drives the icon-only ↔ icon+text mode swap. Padding/margin are
// tightened so the dashed right border doesn't clip against the parent's
// overflow:hidden at minimum width.
.gk-graph .ref-zone > .flex:has(> .merge-target-ref-node),
.gk-graph .ref-zone > .flex:has(> .merge-base-ref-node) {
	container-name: refcol;
	container-type: inline-size;
}

.gk-graph .ref-zone .merge-base-ref-node,
.gk-graph .ref-zone .merge-target-ref-node {
	flex-shrink: 0;
	align-items: center;
	padding: 0 var(--gl-space-4);
	margin-left: 0;
	font-size: 0;
	white-space: nowrap;

	&::before {
		display: inline-block;
		font-size: var(--gl-font-base);
		line-height: 1;
	}
}

.gk-graph .ref-zone .merge-target-ref-node::before {
	font-family: glicons;

	@include iconUtils.glicon('merge-target');
}

.gk-graph .ref-zone .merge-base-ref-node::before {
	font-family: codicon;

	@include iconUtils.codicon('git-branch');
}

@container refcol (min-width: 100px) {
	.gk-graph .ref-zone .merge-base-ref-node,
	.gk-graph .ref-zone .merge-target-ref-node {
		gap: var(--gl-space-4);
		padding: 0 var(--gl-space-6);
		font-size: var(--gl-font-sm);
	}
}

// Light DOM
.graph-app:not(:hover) {
	.gk-graph .graph-header {
		& .resizable-handle.horizontal::before {
			display: none;
		}
	}
}

// Light DOM
.graph-container {
	container-type: inline-size;

	& .resizable-handle.horizontal {
		display: none;
	}

	& .node.stash-node .graph-icon {
		transform: translateY(-2px);
	}

	& .graph-adjust-commit-count {
		display: flex;
		align-items: center;
		justify-content: center;
		width: calc(100cqw - var(--graph-column-scrollbar-thickness));
	}

	& .changes-zone.changes-bar .changes-sub-bar.deleted {
		margin-left: var(--gl-space-2);
	}

	& .wip-stats-pill {
		font-weight: 600;
		background-color: color-mix(
			in srgb,
			var(--vscode-sideBarSectionHeader-background) 90%,
			var(--vscode-foreground) 10%
		);
		border: var(--gl-border-width) solid
			color-mix(in srgb, var(--vscode-sideBarSectionHeader-border) 100%, var(--vscode-foreground) 70%) !important;
		border-radius: var(--gl-radius-sm);

		& .graph-icon {
			font-weight: 600;
		}
	}

	/* Package default selector chain is 5 classes; `!important` is the simplest reliable beat. */
	& .wip-stats-pill__item--added {
		color: var(--gl-stat-added) !important;
	}

	& .wip-stats-pill__item--modified {
		color: var(--gl-stat-modified) !important;
	}

	& .wip-stats-pill__item--deleted {
		color: var(--gl-stat-removed) !important;
	}

	& .wip-stats-pill__check {
		color: var(--gl-stat-added) !important;
	}

	// Graph footer styles
	& .graph-footer__message {
		font-size: var(--gl-font-md);
		font-style: italic;
		color: var(--vscode-descriptionForeground);
	}

	& .graph-footer__message + .graph-footer__link {
		margin-left: 0.5rem;
	}

	& .graph-footer__link {
		padding: 0.2rem 0.5rem;
		font-size: var(--gl-font-md);
		color: var(--vscode-textLink-foreground);
		text-decoration: none;
		cursor: pointer;
		border: var(--gl-border-width) solid transparent;
		border-radius: var(--gl-radius-sm);
		transition: color var(--gl-duration-medium) ease;

		&:hover {
			color: var(--vscode-textLink-activeForeground);
			border-color: var(--vscode-textLink-activeForeground);
		}

		&:focus-visible {
			outline: var(--gl-border-width) solid var(--vscode-focusBorder);
			outline-offset: 0;
			border-color: var(--vscode-focusBorder) !important;
		}
	}
}

// don't see usage
.mr-loose {
	margin-right: 0.5rem;
}

// Light DOM
.gk-graph .tooltip,
.gk-graph.tooltip {
	font-family: var(--vscode-font-family) !important;
	font-size: var(--vscode-font-size) !important;
	font-weight: normal !important;
	line-height: 19px !important;

	&.show {
		opacity: 1;
	}

	&.tooltip-arrow::after {
		background-color: var(--color-hover-background) !important;
		border-right-color: var(--color-hover-border) !important;
		border-bottom-color: var(--color-hover-border) !important;
	}

	&-inner {
		padding: 4px 10px 5px !important;
		font-size: var(--vscode-font-size) !important;
		color: var(--color-hover-foreground) !important;
		text-align: start !important;
		white-space: break-spaces !important;
		background-color: var(--color-hover-background) !important;
		border: var(--gl-border-width) solid var(--color-hover-border) !important;
		border-radius: 0 !important;

		// Light-DOM vendor tooltip (web-graph): needs `!important` to beat the library's own styles,
		// so it can't go through the helper. The `!important` border above is the HC fallback.
		// stylelint-disable-next-line declaration-property-value-disallowed-list
		box-shadow: var(--gl-shadow-tooltip) !important;
	}
}

// light DOM
.graph {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	height: 100vh;
	padding: 0.1rem;
	overflow: hidden;

	// Account + integrations bar (issue #5411): sits above the graph header, always visible so
	// account/integrations state is available when the Graph is the main GitLens panel.
	&__account-bar {
		position: relative;
		z-index: var(--gl-z-sticky);
		flex: none;
		min-width: 0;
		padding: var(--gl-space-4) var(--gl-space-6);
		border-bottom: var(--gl-border-width) solid var(--vscode-sideBarSectionHeader-border, transparent);
	}

	&__header {
		position: relative;
		z-index: var(--gl-z-sticky);
		flex: none;
	}

	&__workspace {
		position: relative;
		flex: 1;
		overflow: hidden;
		border: var(--gl-border-width) solid transparent;
		border-color: var(--vscode-sideBarSectionHeader-border, transparent);
		isolation: isolate;
	}

	&__panes {
		height: 100%;
	}

	&__graph-pane {
		display: flex;
		flex-direction: column;
		height: 100%;
		overflow: hidden;
	}

	&__graph-pane-body {
		display: flex;
		flex: 1;
		min-height: 0;
		overflow: hidden;

		gl-graph-sidebar {
			flex: none;
		}

		.graph__sidebar-split,
		.graph__graph-content {
			flex: 1;
			min-width: 0;
		}

		// Outer-document override of `:host { display: grid }` / `display: flex` —
		// guarantees the graph subtree hides when timeline mode mounts a sibling.
		.graph__sidebar-split[hidden],
		.graph__graph-content[hidden] {
			display: none !important;
		}
	}

	&__graph-content {
		position: relative;
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		overflow: hidden;
		isolation: isolate;

		// display: flex overrides the UA [hidden] rule; re-assert it.
		&[hidden] {
			display: none;
		}

		gl-graph-minimap-container {
			position: relative;

			// Above the gitkraken-components graph internals, which use z-indexes up to 16 —
			// ensures the minimap's Billboard.js tooltips and settings popover render over the graph.
			z-index: var(--gl-z-sticky);
		}

		.graph__minimap-split {
			flex: 1;
			min-height: 0;
		}

		.graph__graph-column {
			display: flex;
			flex: 1;
			flex-direction: column;
			height: 100%;
			min-height: 0;
			overflow: hidden;

			// Details on the bottom → move the WIP bar below the graph (just above the details pane)
			// via flex order, so the bar is restyled/repositioned without remounting the bar or the
			// graph wrapper (DOM reordering would remount and flicker).
			&.-wip-bottom gl-graph-wip-bar {
				order: 1;
			}
		}

		// Light DOM custom elements default to display:inline — force block for flex sizing
		gl-graph-wrapper,
		gl-graph-wrapper > gl-graph {
			display: block;
			height: 100%;
		}

		gl-graph-wrapper {
			flex: 1;
			min-height: 0;
			overflow: hidden;
		}
	}

	&__graph-root {
		width: 100%;
		height: 100%;
	}

	&__details-pane {
		// Provide the CSS variables that details-base.scss normally sets on :root
		--gitlens-scrollbar-gutter-width: 10px;
		--gitlens-tree-foreground: var(--vscode-sideBar-foreground, var(--vscode-foreground));

		display: flex;
		flex-direction: column;
		height: 100%;
		overflow: hidden;
		font-size: var(--font-size);
		color: var(--vscode-sideBar-foreground, var(--color-foreground));
		background-color: var(--vscode-sideBar-background, var(--color-background));

		.graph__details-split[orientation='horizontal'] & {
			border-left: var(--gl-border-width) solid var(--vscode-sideBar-border);
		}

		.graph__details-split[orientation='vertical'] & {
			border-top: var(--gl-border-width) solid var(--vscode-sideBar-border);
		}

		gl-graph-details-panel {
			position: relative;
			display: flex;
			flex: 1;
			flex-direction: column;
			min-height: 0;
			overflow: hidden;
		}

		// Single accent for both modes — the title verb ("Composing Changes" / "Reviewing
		// Changes"), the chip icon (wand / checklist), and the active-state chip together
		// carry mode identity, so color is redundant. Using one accent unifies the visual
		// vocabulary. `--color-highlight` is GitLens's brand accent (wraps the VS Code button
		// background), with `--vscode-focusBorder` as a safety fallback.
		gl-graph-details-panel[data-mode='compose'],
		gl-graph-details-panel[data-mode='review'],
		gl-graph-details-panel[data-mode='resolve'] {
			--mode-accent: var(--color-highlight, var(--vscode-focusBorder));
		}

		// Override graph-column scrollbar thickness for the details pane
		--graph-column-scrollbar-thickness: 10px;

		// Non-scrolling wrapper that anchors the compare sheet's positioning to the visible
		// viewport — `.details-content` itself scrolls, so an absolutely-positioned sheet inside
		// it would scroll along with the content. Hosting the sheet as a sibling of
		// `.details-content` keeps the sheet header pinned to the top of the panel.
		.details-host {
			position: relative;
			display: flex;
			flex: 1;
			flex-direction: column;
			min-height: 0;
			overflow: hidden;
		}

		.details-content {
			position: relative;
			display: flex;
			flex: 1;
			flex-direction: column;
			min-height: 0;
			overflow-y: auto;
			scrollbar-gutter: auto;
			border-color: transparent;
			transition: border-color 1s linear;
		}

		// Commit box pinned to the bottom of the scrolling area so it stays visible while the
		// file list scrolls behind it. The host has no background of its own — supply one here
		// to obscure files scrolling past. Matches both the no-agents case (commit-box is a
		// direct child of .details-content) and the agents case (commit-box sits inside
		// .agent-status-split__bottom, which is itself inside .details-content).
		.details-content gl-commit-box {
			position: sticky;
			bottom: 0;
			z-index: var(--gl-z-raised);
			background-color: var(--vscode-sideBar-background, var(--vscode-editor-background));
		}

		&:hover .details-content,
		&:focus-within .details-content {
			border-color: var(--vscode-scrollbarSlider-background);
			transition: none;
		}

		gl-details-commit-panel,
		gl-details-wip-panel,
		gl-details-multicommit-panel,
		gl-details-review-mode-panel,
		gl-details-compose-mode-panel {
			display: flex;
			flex: 1;
			flex-direction: column;
			min-height: 0;
			overflow: visible;
		}

		// Pinned-compare nested split layout. The host details-content lives in the start slot
		// and the compare panel lives in the end slot — both sides are siblings of a horizontal
		// or vertical split, share the panel area, and stay independently scrollable.
		// `display` is intentionally NOT overridden here — gl-split-panel's shadow CSS sets
		// `:host { display: grid }` to power position-driven sizing. Override that and the
		// position attribute silently does nothing and you fall back to 50/50.
		.compare-pinned-split {
			flex: 1;
			min-height: 0;
		}

		.compare-pinned-split__start,
		.compare-pinned-split__end {
			display: flex;
			flex: 1;
			flex-direction: column;
			min-width: 0;
			min-height: 0;
			overflow: hidden;
		}

		.compare-pinned-host {
			display: flex;
			flex: 1;
			flex-direction: column;
			min-height: 0;
			background: var(--vscode-sideBar-background, var(--color-background));
			border-left: var(--gl-border-width) solid var(--vscode-widget-border, var(--color-foreground--25));
		}

		.compare-pinned-host__header {
			box-sizing: border-box;
			display: flex;
			flex: 0 0 auto;
			gap: var(--gl-space-8);
			align-items: center;
			justify-content: space-between;
			min-height: 4.2rem;
			padding: var(--gl-space-8) var(--gl-space-8) var(--gl-space-8) var(--gl-space-16);
			background: var(--vscode-sideBarSectionHeader-background, var(--vscode-sideBar-background));
			border-bottom: var(--gl-border-width) solid var(--vscode-widget-border, var(--color-foreground--25));
		}

		.compare-pinned-host__title {
			flex: 1 1 auto;
			min-width: 0;
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: var(--gl-font-lg);
			font-weight: 600;
			color: var(--vscode-sideBarTitle-foreground, var(--vscode-foreground));
			white-space: nowrap;
		}

		.compare-pinned-host__actions {
			display: inline-flex;
			flex: 0 0 auto;
			gap: var(--gl-space-2);
			align-items: center;
		}

		.compare-pinned-host__body {
			display: flex;
			flex: 1 1 auto;
			flex-direction: column;
			min-height: 0;
			overflow: hidden;
		}

		.commit-panel {
			&__files {
				display: flex;
				flex: 1;
				flex-direction: column;
				min-height: 100px;
				overflow: visible;
			}

			// Placeholder while preferences (the file layout) load; matches `&__files` sizing to avoid a jump.
			&__files-loading {
				display: flex;
				flex: 1;
				gap: var(--gl-space-6);
				align-items: center;
				justify-content: center;
				min-height: 100px;
				color: var(--vscode-descriptionForeground, var(--color-foreground--50));
			}
		}

		.agent-status-split {
			flex: 1;
			min-height: 0;

			// Auto-size mode (collapsed / partial) caps the agents pane at a fixed 80% — content
			// in these modes (heading bar or a handful of needs-input cards) almost always lands
			// well below the cap, so `fit-content` resolves to the natural content height. The
			// cap matters only in the edge case of many concurrent needs-input cards in partial
			// mode, where it prevents the auto-peek from completely swallowing the WIP content.
			// Kept in sync with `AGENT_STATUS_MAX_PCT` in gl-graph-details-panel.ts.
			&--auto-size:not([dragging]) {
				--gl-split-panel-start-size: fit-content(80%);
			}

			// When the agent-status section is showing no cards (collapsed — bar only — or
			// partial with no needs-input sessions present), force the heading row to its
			// content height regardless of any previously-dragged position. Without this,
			// dragging the splitter while cards are visible and then collapsing back to no-cards
			// leaves the heading floating in a large empty area the size of the user's drag.
			// The split-panel still preserves `position` internally so the dragged height is
			// restored when cards reappear.
			&--no-cards:not([dragging]) {
				--gl-split-panel-start-size: max-content;
			}

			// Disabled splitter — drop the divider entirely so collapsed/partial states (where
			// the agents pane is auto-sized and non-draggable) don't show a hover-affordance
			// line implying it can be grabbed. `visibility: hidden` (not `display: none`) is
			// load-bearing — removing the divider from the grid item flow causes auto-placement
			// to shove the bottom slot into the 0px middle track instead of the 1fr end track,
			// collapsing the WIP panel.
			&[disabled]:not([dragging]) {
				--gl-split-panel-divider-width: 0px;
			}

			&[disabled]:not([dragging])::part(divider) {
				visibility: hidden;
			}

			// Sash gets a 1px line at rest, grows to fill on hover/drag (cf. rebase .conflict-split).
			&:not([disabled])::part(divider) {
				background-image: linear-gradient(
					var(--vscode-sideBarSectionHeader-border, var(--vscode-widget-border)),
					var(--vscode-sideBarSectionHeader-border, var(--vscode-widget-border))
				);
				background-repeat: no-repeat;
				background-position: center;
				background-size: 100% 1px;
				transition: background-color var(--gl-duration-x-fast) var(--gl-ease-out);
			}

			&:not([disabled])::part(divider):hover,
			&:not([disabled])[dragging]::part(divider) {
				background-image: linear-gradient(
					var(--vscode-sash-hoverBorder, var(--vscode-focusBorder)),
					var(--vscode-sash-hoverBorder, var(--vscode-focusBorder))
				);
				background-size: 100% 100%;
				transition: background-color var(--gl-duration-x-fast) var(--gl-ease-out) 0.2s;
			}

			&__top {
				display: flex;
				flex-direction: column;
				overflow-y: auto;
			}

			// Bottom slot is a non-scrolling flex column: the file panel (.commit-panel__files)
			// fills the available height and scrolls internally via webview-pane's `.content`,
			// while `gl-commit-box` sits flex-pinned at the bottom — outside the scroll. This is
			// why files don't disappear "behind" the commit box: they never share a scroll
			// region with it.
			&__bottom {
				display: flex;
				flex-direction: column;
				min-height: 0;
				overflow: hidden;
			}

			&__bottom .commit-panel__files {
				display: flex;
				flex: 1;
				flex-direction: column;
				min-height: 0;
				overflow: hidden;
			}
		}
	}
}

.graph__details-split {
	--gl-split-panel-divider-hit-area: var(--vscode-sash-hoverSize, 8px);

	// Keep divider width stable (4px) when disabled so the graph pane width
	// doesn't shift when selection toggles (e.g. applying a scope clears the
	// current selection, which disables the split). Suppress interactive
	// visuals instead of collapsing the track.
	&[disabled]::part(divider) {
		pointer-events: none;
		cursor: default;
	}
}

@keyframes details-fade-in {
	from {
		opacity: 0;
		transform: translateX(8px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes details-fade-in-vertical {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.details-opening {
	overflow: hidden;
	animation: details-fade-in var(--gl-duration-medium) var(--gl-ease-out);

	&.-vertical {
		animation-name: details-fade-in-vertical;
	}
}

@keyframes skeleton-pulse {
	0%,
	100% {
		opacity: 0.15;
	}

	50% {
		opacity: 0.25;
	}
}

.details-skeleton {
	display: flex;
	flex-direction: column;
	gap: var(--gl-space-12);
	padding: var(--gl-space-12);

	&__header {
		display: flex;
		gap: var(--gl-space-8);
		align-items: center;
	}

	&__avatar {
		width: 32px;
		height: 32px;
		background: var(--color-foreground);
		border-radius: 50%;
		animation: skeleton-pulse 1.5s var(--gl-ease-in-out) infinite;
	}

	&__lines {
		display: flex;
		flex: 1;
		flex-direction: column;
		gap: 0.5rem;
	}

	&__line {
		height: 10px;
		background: var(--color-foreground);
		border-radius: var(--gl-radius-sm);
		animation: skeleton-pulse 1.5s var(--gl-ease-in-out) infinite;
	}

	&__line--short {
		height: 8px;
	}

	&__lines > &__line:nth-child(1) {
		width: 60%;
	}

	&__lines > &__line:nth-child(2) {
		width: 40%;
	}

	&__body > &__line:nth-child(1) {
		width: 90%;
	}

	&__body > &__line:nth-child(2) {
		width: 70%;
	}

	&__body > &__line:nth-child(3) {
		width: 50%;
	}

	&__bar {
		height: 28px;
		background: var(--color-foreground);
		border-radius: var(--gl-radius-sm);
		animation: skeleton-pulse 1.5s var(--gl-ease-in-out) infinite;
	}

	&__body {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}
}

.details-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--gl-space-20) var(--gl-space-12);
	font-size: var(--gl-font-md);
	color: var(--vscode-descriptionForeground, var(--color-foreground--50));
}

.details-stale {
	pointer-events: none;
	opacity: 0.85;
	transition: opacity 0.5s var(--gl-ease-out) 0.5s;
}

.graph-row-actions {
	display: flex;
	gap: 0.3rem;
	height: 100%;
	font-size: var(--gl-font-base);

	gl-button {
		height: 100%;
	}

	// The unpushed indicator IS the Push to Commit action on commits ahead of HEAD's upstream:
	// a toolbar button colorized with the "ahead" decoration color so it reads as a badge at rest
	// while staying live and clickable (hover gets the usual toolbar background). The row's
	// `dynamic: 'interaction'` adornment keeps it present at rest, so no CSS reveal hack is needed.
	.unpushed-push-button {
		color: var(--branch-status-ahead-foreground);
	}

	// Agent indicator — leftmost button on a WIP row when the worktree has at least one
	// surfacing agent. Color drives both the main `robot` glyph and the suffix modifier so
	// the dot of color reads as a status badge rather than two unrelated icons. Tokens come
	// from theme.scss so this stays aligned with gl-details-agent-status, the status pill,
	// and the WIP file decoration. `--button-gap: 0` collapses the slot gap inside gl-button
	// so the robot and its phase suffix sit flush, reading as a single status badge rather
	// than two adjacent icons.
	.agent-indicator {
		--agent-indicator-color: inherit;
		--button-gap: 0;

		color: var(--agent-indicator-color);

		&--needs-input {
			--agent-indicator-color: var(--gl-agent-waiting-color);
		}

		&--working {
			--agent-indicator-color: var(--gl-agent-working-color);
		}

		&--idle {
			--agent-indicator-color: var(--gl-agent-idle-color);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

@include meta.load-css('../../shared/codicons');
