@use '../../../shared/styles/utils';

// raw dark color tokens, only referenced in this file
@include utils.dark-theme($selectorPrefix: ':root:has(', $selectorPostfix: ')') {
	// color-scheme: dark;

	--wa-color-red-50: hsl(0deg 56% 23.9%);
	--wa-color-red-100: hsl(0.6deg 60% 33.9%);
	--wa-color-red-200: hsl(0.9deg 67.2% 37.1%);
	--wa-color-red-300: hsl(1.1deg 71.3% 43.7%);
	--wa-color-red-400: hsl(1deg 76% 52.5%);
	--wa-color-red-500: hsl(0.7deg 89.6% 57.2%);
	--wa-color-red-600: hsl(0deg 98.6% 67.9%);
	--wa-color-red-700: hsl(0deg 100% 72.3%);
	--wa-color-red-800: hsl(0deg 100% 85.6%);
	--wa-color-red-900: hsl(0deg 100% 90.3%);
	--wa-color-red-950: hsl(0deg 100% 95.9%);

	--wa-color-amber-50: hsl(21.9deg 66.3% 21.1%);
	--wa-color-amber-100: hsl(21.5deg 73.6% 29.7%);
	--wa-color-amber-200: hsl(22.3deg 77.6% 33.3%);
	--wa-color-amber-300: hsl(25.4deg 84.2% 39.6%);
	--wa-color-amber-400: hsl(31.4deg 87.4% 46.7%);
	--wa-color-amber-500: hsl(37deg 96.6% 48.3%);
	--wa-color-amber-600: hsl(43.3deg 100% 53.4%);
	--wa-color-amber-700: hsl(46.5deg 100% 61.1%);
	--wa-color-amber-800: hsl(49.3deg 100% 73%);
	--wa-color-amber-900: hsl(51.8deg 100% 85%);
	--wa-color-amber-950: hsl(60deg 100% 94.6%);

	--wa-color-green-50: hsl(144.3deg 53.6% 16%);
	--wa-color-green-100: hsl(143.2deg 55.4% 23.5%);
	--wa-color-green-200: hsl(141.5deg 58.2% 26.3%);
	--wa-color-green-300: hsl(140.8deg 64.2% 31.8%);
	--wa-color-green-400: hsl(140.3deg 68% 39.2%);
	--wa-color-green-500: hsl(141.1deg 64.9% 43%);
	--wa-color-green-600: hsl(141.6deg 72.4% 55.2%);
	--wa-color-green-700: hsl(141.7deg 82.7% 70.1%);
	--wa-color-green-800: hsl(141deg 90.9% 82.1%);
	--wa-color-green-900: hsl(142deg 100% 89.1%);
	--wa-color-green-950: hsl(144deg 100% 95.5%);
}

// raw light color tokens, only referenced in this file
@include utils.light-theme($selectorPrefix: ':root:has(', $selectorPostfix: ')') {
	// color-scheme: light;

	--wa-color-red-50: hsl(0deg 85.7% 97.3%);
	--wa-color-red-100: hsl(0deg 93.3% 94.1%);
	--wa-color-red-200: hsl(0deg 96.3% 89.4%);
	--wa-color-red-300: hsl(0deg 93.5% 81.8%);
	--wa-color-red-400: hsl(0deg 90.6% 70.8%);
	--wa-color-red-500: hsl(0deg 84.2% 60.2%);
	--wa-color-red-600: hsl(0deg 72.2% 50.6%);
	--wa-color-red-700: hsl(0deg 73.7% 41.8%);
	--wa-color-red-800: hsl(0deg 70% 35.3%);
	--wa-color-red-900: hsl(0deg 62.8% 30.6%);
	--wa-color-red-950: hsl(0deg 60% 19.6%);

	--wa-color-amber-50: hsl(48deg 100% 96.1%);
	--wa-color-amber-100: hsl(48deg 96.5% 88.8%);
	--wa-color-amber-200: hsl(48deg 96.6% 76.7%);
	--wa-color-amber-300: hsl(45.9deg 96.7% 64.5%);
	--wa-color-amber-400: hsl(43.3deg 96.4% 56.3%);
	--wa-color-amber-500: hsl(37.7deg 92.1% 50.2%);
	--wa-color-amber-600: hsl(32.1deg 94.6% 43.7%);
	--wa-color-amber-700: hsl(26deg 90.5% 37.1%);
	--wa-color-amber-800: hsl(22.7deg 82.5% 31.4%);
	--wa-color-amber-900: hsl(21.7deg 77.8% 26.5%);
	--wa-color-amber-950: hsl(22.9deg 74.1% 16.7%);

	--wa-color-green-50: hsl(138.5deg 76.5% 96.7%);
	--wa-color-green-100: hsl(140.6deg 84.2% 92.5%);
	--wa-color-green-200: hsl(141deg 78.9% 85.1%);
	--wa-color-green-300: hsl(141.7deg 76.6% 73.1%);
	--wa-color-green-400: hsl(141.9deg 69.2% 58%);
	--wa-color-green-500: hsl(142.1deg 70.6% 45.3%);
	--wa-color-green-600: hsl(142.1deg 76.2% 36.3%);
	--wa-color-green-700: hsl(142.4deg 71.8% 29.2%);
	--wa-color-green-800: hsl(142.8deg 64.2% 24.1%);
	--wa-color-green-900: hsl(143.8deg 61.2% 20.2%);
	--wa-color-green-950: hsl(144.3deg 60.7% 12%);
}

// generic semantic tokens
:root {
	--wa-color-success-50: var(--wa-color-green-50);
	--wa-color-success-100: var(--wa-color-green-100);
	--wa-color-success-200: var(--wa-color-green-200);
	--wa-color-success-300: var(--wa-color-green-300);
	--wa-color-success-400: var(--wa-color-green-400);
	--wa-color-success-500: var(--wa-color-green-500);
	--wa-color-success-600: var(--wa-color-green-600);
	--wa-color-success-700: var(--wa-color-green-700);
	--wa-color-success-800: var(--wa-color-green-800);
	--wa-color-success-900: var(--wa-color-green-900);
	--wa-color-success-950: var(--wa-color-green-950);

	--wa-color-warning-50: var(--wa-color-amber-50);
	--wa-color-warning-100: var(--wa-color-amber-100);
	--wa-color-warning-200: var(--wa-color-amber-200);
	--wa-color-warning-300: var(--wa-color-amber-300);
	--wa-color-warning-400: var(--wa-color-amber-400);
	--wa-color-warning-500: var(--wa-color-amber-500);
	--wa-color-warning-600: var(--wa-color-amber-600);
	--wa-color-warning-700: var(--wa-color-amber-700);
	--wa-color-warning-800: var(--wa-color-amber-800);
	--wa-color-warning-900: var(--wa-color-amber-900);
	--wa-color-warning-950: var(--wa-color-amber-950);

	--wa-color-danger-50: var(--wa-color-red-50);
	--wa-color-danger-100: var(--wa-color-red-100);
	--wa-color-danger-200: var(--wa-color-red-200);
	--wa-color-danger-300: var(--wa-color-red-300);
	--wa-color-danger-400: var(--wa-color-red-400);
	--wa-color-danger-500: var(--wa-color-red-500);
	--wa-color-danger-600: var(--wa-color-red-600);
	--wa-color-danger-700: var(--wa-color-red-700);
	--wa-color-danger-800: var(--wa-color-red-800);
	--wa-color-danger-900: var(--wa-color-red-900);
	--wa-color-danger-950: var(--wa-color-red-950);

	--wa-color-neutral-50: color-mix(in srgb, var(--vscode-foreground) 5%, var(--vscode-editor-background));
	--wa-color-neutral-100: color-mix(in srgb, var(--vscode-foreground) 10%, var(--vscode-editor-background));
	--wa-color-neutral-200: color-mix(in srgb, var(--vscode-foreground) 20%, var(--vscode-editor-background));
	--wa-color-neutral-300: color-mix(in srgb, var(--vscode-foreground) 30%, var(--vscode-editor-background));
	--wa-color-neutral-400: color-mix(in srgb, var(--vscode-foreground) 40%, var(--vscode-editor-background));
	--wa-color-neutral-500: color-mix(in srgb, var(--vscode-foreground) 50%, var(--vscode-editor-background));
	--wa-color-neutral-600: color-mix(in srgb, var(--vscode-foreground) 60%, var(--vscode-editor-background));
	--wa-color-neutral-700: color-mix(in srgb, var(--vscode-foreground) 70%, var(--vscode-editor-background));
	--wa-color-neutral-800: color-mix(in srgb, var(--vscode-foreground) 80%, var(--vscode-editor-background));
	--wa-color-neutral-900: color-mix(in srgb, var(--vscode-foreground) 90%, var(--vscode-editor-background));
	--wa-color-neutral-950: color-mix(in srgb, var(--vscode-foreground) 95%, var(--vscode-editor-background));

	--wa-color-neutral-0: var(--vscode-editor-background);
	--wa-color-neutral-1000: var(--vscode-foreground);

	--wa-color-primary-500: var(--vscode-button-background);
	--wa-color-primary-600: var(--vscode-button-hoverBackground);

	--wa-border-radius-small: 0.3rem; // 0.1875rem;
	--wa-border-radius-medium: 0.4rem; // 0.25rem;
	--wa-border-radius-large: 0.8rem; // 0.5rem;
	--wa-border-radius-x-large: 1.6rem; // 1rem;

	--wa-border-radius-circle: 50%;
	--wa-border-radius-pill: 9999px;

	// WebAwesome shadow aliases track the --gl-shadow-* scale so WA component shadows stay
	// theme-reactive and vanish in high-contrast like the rest of the system (large → tooltip is
	// byte-identical, so existing toast shadows are unchanged). See docs/webview-styling.md.
	--wa-shadow-x-small: var(--gl-shadow-raised);
	--wa-shadow-small: var(--gl-shadow-raised);
	--wa-shadow-medium: var(--gl-shadow-raised);
	--wa-shadow-large: var(--gl-shadow-tooltip);
	--wa-shadow-x-large: var(--gl-shadow-popover);

	--wa-spacing-3x-small: 0.2rem; // 0.125rem;
	--wa-spacing-2x-small: 0.4rem; // 0.25rem;
	--wa-spacing-x-small: 0.8rem; // 0.5rem;
	--wa-spacing-small: 1.2rem; // 0.75rem;
	--wa-spacing-medium: 1.6rem; // 1rem;
	--wa-spacing-large: 2rem; // 1.25rem;
	--wa-spacing-x-large: 2.8rem; // 1.75rem;
	--wa-spacing-2x-large: 3.6rem; // 2.25rem;
	--wa-spacing-3x-large: 4.8rem; // 3rem;
	--wa-spacing-4x-large: 4.5rem; // 4.5rem;

	--wa-transition-x-slow: 1000ms;
	--wa-transition-slow: 500ms;
	--wa-transition-medium: 250ms;
	--wa-transition-fast: 150ms;
	--wa-transition-x-fast: 50ms;

	--wa-font-mono: var(--vscode-editor-font-family);
	--wa-font-sans: var(--vscode-font-family);
	--wa-font-serif: georgia, 'Times New Roman', serif;

	--wa-font-size-2x-small: calc(var(--vscode-font-size) * 0.625);
	--wa-font-size-x-small: calc(var(--vscode-font-size) * 0.75);
	--wa-font-size-small: calc(var(--vscode-font-size) * 0.875);
	--wa-font-size-medium: calc(var(--vscode-font-size) * 1);
	--wa-font-size-large: calc(var(--vscode-font-size) * 1.25);
	--wa-font-size-x-large: calc(var(--vscode-font-size) * 1.5);
	--wa-font-size-2x-large: calc(var(--vscode-font-size) * 2.25);
	--wa-font-size-3x-large: calc(var(--vscode-font-size) * 3);
	--wa-font-size-4x-large: calc(var(--vscode-font-size) * 4.5);

	--wa-font-weight-light: 300;
	--wa-font-weight-normal: 400;
	--wa-font-weight-bold: 700;

	--wa-letter-spacing-denser: -0.03em;
	--wa-letter-spacing-dense: -0.015em;
	--wa-letter-spacing-normal: normal;
	--wa-letter-spacing-loose: 0.075em;
	--wa-letter-spacing-looser: 0.15em;

	--wa-line-height-denser: 1;
	--wa-line-height-dense: 1.4;
	--wa-line-height-normal: 1.8;
	--wa-line-height-loose: 2.2;
	--wa-line-height-looser: 2.6;

	--wa-focus-ring-color: var(--vscode-focusBorder);
	--wa-focus-ring-style: solid;
	--wa-focus-ring-width: 1px;

	--wa-button-font-size-small: var(--wa-font-size-x-small);
	--wa-button-font-size-medium: var(--wa-font-size-small);
	--wa-button-font-size-large: var(--wa-font-size-medium);

	--wa-input-height-small: 1.875rem;
	--wa-input-height-medium: 2.5rem;
	--wa-input-height-large: 3.125rem;

	--wa-input-background-color: var(--wa-color-neutral-0);
	--wa-input-background-color-hover: var(--wa-input-background-color);
	--wa-input-background-color-focus: var(--wa-input-background-color);
	--wa-input-background-color-disabled: var(--wa-color-neutral-100);
	--wa-input-border-color: var(--wa-color-neutral-300);
	--wa-input-border-color-hover: var(--wa-color-neutral-400);
	--wa-input-border-color-focus: var(--vscode-focusBorder);
	--wa-input-border-color-disabled: var(--wa-color-neutral-300);
	--wa-input-border-width: 1px;
	--wa-input-required-content: '*';
	--wa-input-required-content-offset: -2px;
	--wa-input-required-content-color: var(--wa-input-label-color);

	--wa-input-border-radius-small: var(--wa-border-radius-medium);
	--wa-input-border-radius-medium: var(--wa-border-radius-medium);
	--wa-input-border-radius-large: var(--wa-border-radius-medium);

	--wa-input-font-family: var(--wa-font-sans);
	--wa-input-font-weight: var(--wa-font-weight-normal);
	--wa-input-font-size-small: var(--wa-font-size-small);
	--wa-input-font-size-medium: var(--wa-font-size-medium);
	--wa-input-font-size-large: var(--wa-font-size-large);
	--wa-input-letter-spacing: var(--wa-letter-spacing-normal);

	--wa-input-color: var(--wa-color-neutral-700);
	--wa-input-color-hover: var(--wa-color-neutral-700);
	--wa-input-color-focus: var(--wa-color-neutral-700);
	--wa-input-color-disabled: var(--wa-color-neutral-900);
	--wa-input-icon-color: var(--wa-color-neutral-500);
	--wa-input-icon-color-hover: var(--wa-color-neutral-600);
	--wa-input-icon-color-focus: var(--wa-color-neutral-600);
	--wa-input-placeholder-color: var(--wa-color-neutral-500);
	--wa-input-placeholder-color-disabled: var(--wa-color-neutral-600);
	--wa-input-spacing-small: var(--wa-spacing-small);
	--wa-input-spacing-medium: var(--wa-spacing-medium);
	--wa-input-spacing-large: var(--wa-spacing-large);

	--wa-input-focus-ring-color: var(--vscode-focusBorder);
	--wa-input-focus-ring-offset: 0;

	--wa-input-filled-background-color: var(--wa-color-neutral-100);
	--wa-input-filled-background-color-hover: var(--wa-color-neutral-100);
	--wa-input-filled-background-color-focus: var(--wa-color-neutral-100);
	--wa-input-filled-background-color-disabled: var(--wa-color-neutral-100);
	--wa-input-filled-color: var(--wa-color-neutral-800);
	--wa-input-filled-color-hover: var(--wa-color-neutral-800);
	--wa-input-filled-color-focus: var(--wa-color-neutral-700);
	--wa-input-filled-color-disabled: var(--wa-color-neutral-800);

	--wa-input-label-font-size-small: var(--wa-font-size-small);
	--wa-input-label-font-size-medium: var(--wa-font-size-medium);
	--wa-input-label-font-size-large: var(--wa-font-size-large);
	--wa-input-label-color: inherit;

	--wa-input-help-text-font-size-small: var(--wa-font-size-x-small);
	--wa-input-help-text-font-size-medium: var(--wa-font-size-small);
	--wa-input-help-text-font-size-large: var(--wa-font-size-medium);
	--wa-input-help-text-color: var(--wa-color-neutral-500);

	--wa-toggle-size-small: 0.875rem;
	--wa-toggle-size-medium: 1.125rem;
	--wa-toggle-size-large: 1.375rem;

	--wa-overlay-background-color: var(--vscode-widget-shadow);

	--wa-panel-background-color: var(--vscode-menu-background);
	--wa-panel-border-color: var(--vscode-menu-border);
	--wa-panel-border-width: 1px;

	--wa-tooltip-border-radius: var(--wa-border-radius-small);
	--wa-tooltip-background-color: var(--color-hover-background);
	--wa-tooltip-color: var(--color-hover-foreground);
	--wa-tooltip-font-family: var(--wa-font-sans);
	--wa-tooltip-font-weight: var(--wa-font-weight-normal);
	--wa-tooltip-font-size: 12px; // var(--wa-font-size-small);
	--wa-tooltip-line-height: var(--wa-line-height-dense);
	--wa-tooltip-padding: var(--wa-spacing-2x-small) var(--wa-spacing-x-small);
	--wa-tooltip-arrow-size: 6px;
	--gl-tooltip-border-color: var(--color-hover-border);
	--gl-tooltip-shadow: var(--vscode-widget-shadow);

	/* Band contract with the GitLens scale (tokens.scss): --gl-z-* (-2…500) composes layers
	   WITHIN the document/panels; this --wa-z-index-* band (700…1000) is for FLOATING transient
	   surfaces (hoisted popovers/tooltips, toasts) and sits deliberately ABOVE the entire
	   --gl-z-* band. Keep the bands disjoint — never interleave them or raise a --gl-z-* tier
	   into this band; anything that must beat a floating surface belongs in the top layer. */
	--wa-z-index-drawer: 700;
	--wa-z-index-dialog: 800;
	--wa-z-index-dropdown: 900;
	--wa-z-index-toast: 950;
	--wa-z-index-tooltip: 1000;

	/* Web Awesome form-control / semantic tokens (in addition to the Shoelace-shaped
	   tokens above). wa-select, wa-option, wa-slider all reference these — without
	   these definitions the components fall through to undefined values and render
	   with no background, no hover state, invisible slider thumbs, etc. */
	--wa-form-control-background-color: var(--vscode-dropdown-background);
	--wa-form-control-border-color: var(--vscode-dropdown-border);
	--wa-form-control-border-radius: 3px;
	--wa-form-control-border-style: solid;
	--wa-form-control-border-width: 1px;
	--wa-form-control-padding-inline: 4px;
	--wa-form-control-placeholder-color: var(--vscode-input-placeholderForeground);
	--wa-form-control-value-color: var(--vscode-dropdown-foreground);
	--wa-form-control-value-font-weight: normal;
	--wa-form-control-value-line-height: 1.35;
	--wa-form-control-activated-color: var(--vscode-foreground);
	--wa-color-focus: var(--vscode-focusBorder);
	--wa-color-mix-hover: var(--vscode-list-hoverBackground);
	--wa-color-mix-active: var(--vscode-list-activeSelectionBackground);
	--wa-color-surface-default: var(--vscode-editor-background);
	--wa-color-surface-border: var(--vscode-dropdown-border);
	--wa-color-surface-raised: var(--vscode-dropdown-background);
	--wa-color-text-normal: var(--vscode-foreground);
	--wa-color-text-quiet: var(--vscode-descriptionForeground);
	--wa-color-neutral-fill-normal: var(--vscode-list-hoverBackground);
	--wa-color-neutral-on-normal: var(--vscode-list-hoverForeground);
	--wa-color-neutral-fill-quiet: transparent;
	--wa-color-neutral-on-quiet: var(--vscode-foreground);
	--wa-color-brand-fill-loud: var(--vscode-list-activeSelectionBackground);
	--wa-color-brand-on-loud: var(--vscode-list-activeSelectionForeground);
	--wa-shadow-m: var(--gl-shadow-tooltip); // was hardcoded rgb(0 0 0 / 15%), bypassing the theme
	--wa-border-style: solid;
	--wa-border-width-s: 1px;
	--wa-border-radius-m: 3px;
	--wa-line-height-condensed: 1.35;
	--wa-font-size-smaller: 0.875em;
	--wa-font-weight-semibold: 600;
	--wa-focus-ring-offset: -1px;
	--wa-focus-ring: 1px solid var(--vscode-focusBorder);
	--wa-tooltip-content-color: var(--color-hover-foreground);
}

@supports (scrollbar-gutter: stable) {
	.sl-scroll-lock {
		overflow: hidden !important;
		scrollbar-gutter: stable !important;
	}
}

@supports not (scrollbar-gutter: stable) {
	.sl-scroll-lock body {
		padding-right: var(--wa-scroll-lock-size) !important;
		overflow: hidden !important;
	}
}

.sl-toast-stack {
	position: fixed;
	inset-inline-end: 0;
	top: 0;
	z-index: var(--wa-z-index-toast);
	width: 28rem;
	max-width: 100%;
	max-height: 100%;
	overflow: auto;
}

.sl-toast-stack sl-alert {
	margin: var(--wa-spacing-medium);
}

.sl-toast-stack sl-alert::part(base) {
	box-shadow: var(--wa-shadow-large);
}
