@use '../../shared/styles/utils';
@use '../../shared/styles/shoelace/vscode-theme';

:root {
	--font-family: var(--vscode-font-family);
	--font-size: var(--vscode-font-size);
	--font-weight: var(--vscode-font-weight);

	--editor-font-family: var(--vscode-editor-font-family);
	--editor-font-size: var(--vscode-editor-font-size);
	--editor-font-weight: var(--vscode-editor-font-weight);

	--color-background: var(--vscode-editor-background);
	// Computed variants in code
	--color-background--lighten-05: color-mix(in srgb, #fff 5%, var(--color-background));
	--color-background--darken-05: color-mix(in srgb, #000 5%, var(--color-background));
	--color-background--lighten-075: color-mix(in srgb, #fff 7.5%, var(--color-background));
	--color-background--darken-075: color-mix(in srgb, #000 7.5%, var(--color-background));
	--color-background--lighten-10: color-mix(in srgb, #fff 10%, var(--color-background));
	--color-background--darken-10: color-mix(in srgb, #000 10%, var(--color-background));
	--color-background--lighten-15: color-mix(in srgb, #fff 15%, var(--color-background));
	--color-background--darken-15: color-mix(in srgb, #000 15%, var(--color-background));
	--color-background--lighten-30: color-mix(in srgb, #fff 30%, var(--color-background));
	--color-background--darken-30: color-mix(in srgb, #000 30%, var(--color-background));
	--color-background--lighten-50: color-mix(in srgb, #fff 50%, var(--color-background));
	--color-background--darken-50: color-mix(in srgb, #000 50%, var(--color-background));

	--color-foreground: var(--vscode-editor-foreground, var(--vscode-foreground));
	// Computed variants in code
	--color-foreground--85: color-mix(in srgb, transparent 15%, var(--color-foreground));
	--color-foreground--75: color-mix(in srgb, transparent 25%, var(--color-foreground));
	--color-foreground--65: color-mix(in srgb, transparent 35%, var(--color-foreground));
	--color-foreground--50: color-mix(in srgb, transparent 50%, var(--color-foreground));
	--color-foreground--25: color-mix(in srgb, transparent 75%, var(--color-foreground));

	--color-button-background: var(--vscode-button-background, transparent);
	// Computed variants in code
	--color-button-background--darken-30: color-mix(in srgb, #000 30%, var(--color-button-background));
	--color-button-foreground: var(--vscode-button-foreground, var(--color-foreground));

	--color-button-secondary-background: var(--vscode-button-secondaryBackground, transparent);
	// Computed variants in code
	--color-button-secondary-background--darken-30: color-mix(
		in srgb,
		#000 30%,
		var(--color-button-secondary-background)
	);

	--color-highlight: var(--vscode-button-background, var(--vscode-button-border));
	// Computed variants in code
	--color-highlight--75: color-mix(in srgb, transparent 25%, var(--color-highlight));
	--color-highlight--50: color-mix(in srgb, transparent 50%, var(--color-highlight));
	--color-highlight--25: color-mix(in srgb, transparent 75%, var(--color-highlight));

	--color-focus-border: var(--vscode-focusBorder);

	--color-link-foreground: var(--vscode-textLink-foreground);
	// Computed variants in code
	--color-link-foreground--darken-20: color-mix(in srgb, #000 20%, var(--color-link-foreground));
	--color-link-foreground--lighten-20: color-mix(in srgb, #fff 20%, var(--color-link-foreground));

	--color-view-background: var(--vscode-sideBar-background, var(--color-background));
	--color-view-foreground: var(--vscode-sideBar-foreground, var(--color-foreground));
	--color-view-header-foreground: var(--vscode-sideBarSectionHeader-foreground, var(--color-foreground));

	--color-hover-background: var(--vscode-editorHoverWidget-background);
	--color-hover-border: var(--vscode-editorHoverWidget-border);
	--color-hover-foreground: var(--vscode-editorHoverWidget-foreground);
	--color-hover-statusBarBackground: var(--vscode-editorHoverWidget-statusBarBackground);

	--color-alert-infoBackground: var(--vscode-inputValidation-infoBackground);
	--color-alert-infoBorder: var(--vscode-inputValidation-infoBorder);
	--color-alert-infoForeground: var(--vscode-inputValidation-infoForeground, var(--color-alert-foreground));

	--color-alert-warningBackground: var(--vscode-inputValidation-warningBackground);
	--color-alert-warningBorder: var(--vscode-inputValidation-warningBorder);
	--color-alert-warningForeground: var(--vscode-inputValidation-warningForeground, var(--color-alert-foreground));

	--color-alert-errorBackground: var(--vscode-inputValidation-errorBackground);
	--color-alert-errorBorder: var(--vscode-inputValidation-errorBorder);
	--color-alert-errorForeground: var(--vscode-inputValidation-errorForeground, var(--color-alert-foreground));

	--color-alert-neutralBorder: var(--vscode-input-foreground);

	--color-alert-foreground: var(--vscode-input-foreground);

	--gl-indicator-color: var(--vscode-activityBarBadge-background);
	--gl-indicator-pulse-color: var(--vscode-activityBarBadge-background);

	--gl-tracking-ahead: var(--vscode-gitlens-decorations\.branchAheadForegroundColor);
	--gl-tracking-behind: var(--vscode-gitlens-decorations\.branchBehindForegroundColor);
	--gl-tracking-working: var(--vscode-activityBarBadge-background);
	--gl-tracking-missing: var(--vscode-gitlens-decorations\.branchMissingUpstreamForegroundColor);
	--gl-overlay-color: var(--vscode-widget-shadow);
}

body[data-placement='view'] {
	--color-background: var(--vscode-sideBar-background, var(--vscode-editor-background));
}

body[data-placement='panel'] {
	--color-background: var(--vscode-panel-background, var(--vscode-editor-background));
}

@include utils.dark-theme($selectorPrefix: ':root:has(', $selectorPostfix: ')') {
	--color-alert-infoHoverBackground: color-mix(in srgb, #fff 5%, var(--color-alert-infoBackground));
	--color-alert-warningHoverBackground: color-mix(in srgb, #fff 5%, var(--color-alert-warningBackground));
	--color-alert-errorHoverBackground: color-mix(in srgb, #fff 5%, var(--color-alert-errorBackground));
	--color-alert-neutralBackground: color-mix(in srgb, #fff 5%, var(--color-background));
	--color-alert-neutralHoverBackground: color-mix(in srgb, #fff 5%, var(--color-alert-neutralBackground));
}

@include utils.light-theme($selectorPrefix: ':root:has(', $selectorPostfix: ')') {
	--color-alert-infoHoverBackground: color-mix(in srgb, #000 5%, var(--color-alert-infoBackground));
	--color-alert-warningHoverBackground: color-mix(in srgb, #000 5%, var(--color-alert-warningBackground));
	--color-alert-errorHoverBackground: color-mix(in srgb, #000 5%, var(--color-alert-errorBackground));
	--color-alert-neutralBackground: color-mix(in srgb, #000 5%, var(--color-background));
	--color-alert-neutralHoverBackground: color-mix(in srgb, #000 5%, var(--color-alert-neutralBackground));
}
