@import './dark-theme';
@import './high-contrast-theme.scss';

docs-markdown-editor {
	--ff-sans: Arial, 'Helvetica Neue', Helvetica, sans-serif;
	--ff-serif: Georgia, Times New Roman, Times, serif;
	--ff-mono: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
		Bitstream Vera Sans Mono, Courier New, monospace, sans-serif;
	--theme-body-font-family: var(--ff-sans);
	--white: #fff;
	--black: #0c0d0e;
	--orange: #f48024;
	--yellow: #fbf2d4;
	--green: #5eba7d;
	--blue: #0077cc;
	--powder: #e1ecf4;
	--red: #d1383d;
	--black-025: #fafafb;
	--black-050: #eff0f1;
	--black-075: #e4e6e8;
	--black-100: #d6d9dc;
	--black-150: #c8ccd0;
	--black-200: #bbc0c4;
	--black-300: #9fa6ad;
	--black-350: #9199a1;
	--black-400: #848d95;
	--black-500: #6a737c;
	--black-600: #535a60;
	--black-700: #3c4146;
	--black-750: #2f3337;
	--black-800: #242729;
	--black-900: #0c0d0e;
	--orange-050: #fff7f2;
	--orange-100: #fee3cf;
	--orange-200: #fcd0ad;
	--orange-300: #f7aa6d;
	--orange-400: #f48024;
	--orange-500: #f2720c;
	--orange-600: #da670b;
	--orange-700: #bd5c00;
	--orange-800: #a35200;
	--orange-900: #874600;
	--blue-050: #f2f9ff;
	--blue-100: #cfeafe;
	--blue-200: #addafc;
	--blue-300: #6cbbf7;
	--blue-400: #379fef;
	--blue-500: #0095ff;
	--blue-600: #0077cc;
	--blue-700: #0064bd;
	--blue-800: #0054a3;
	--blue-900: #004487;
	--powder-050: #f4f8fb;
	--powder-100: #e1ecf4;
	--powder-200: #d1e5f1;
	--powder-300: #b3d3ea;
	--powder-400: #a0c7e4;
	--powder-500: #7aa7c7;
	--powder-600: #5b8db1;
	--powder-700: #39739d;
	--powder-800: #2c5777;
	--powder-900: #1e3c52;
	--green-025: #eef8f1;
	--green-050: #dcf0e2;
	--green-100: #cae8d4;
	--green-200: #a6d9b7;
	--green-300: #82ca9a;
	--green-400: #5eba7d;
	--green-500: #48a868;
	--green-600: #3d8f58;
	--green-700: #2f6f44;
	--green-800: #29603b;
	--green-900: #1e472c;
	--yellow-050: #fdf7e3;
	--yellow-100: #fbf2d4;
	--yellow-200: #f1e5bc;
	--yellow-300: #e6d178;
	--yellow-400: #e9c63f;
	--yellow-500: #ddb624;
	--yellow-600: #cea51b;
	--yellow-700: #b89516;
	--yellow-800: #9f8010;
	--yellow-900: #826a0b;
	--red-050: #fdf3f4;
	--red-100: #f9d3d7;
	--red-200: #f4b4bb;
	--red-300: #e87c87;
	--red-400: #de535e;
	--red-500: #d1383d;
	--red-600: #c02d2e;
	--red-700: #ac2726;
	--red-800: #942121;
	--red-900: #7a1819;
	--gold: #ffcc01;
	--gold-lighter: #fff4d1;
	--gold-darker: #f1b600;
	--silver: #b4b8bc;
	--silver-lighter: #e8e8e8;
	--silver-darker: #9a9c9f;
	--bronze: #caa789;
	--bronze-lighter: #f2e9e1;
	--bronze-darker: #ab825f;
	--fc-dark: #0c0d0e;
	--fc-medium: #3c4146;
	--fc-light: #6a737c;
	--focus-ring: rgba(0, 149, 255, 0.15);
	--focus-ring-success: rgba(166, 217, 183, 0.4);
	--focus-ring-warning: rgba(233, 198, 63, 0.4);
	--focus-ring-error: rgba(192, 45, 46, 0.15);
	--focus-ring-muted: rgba(23, 23, 23);
	--bs-sm: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.05),
		0 2px 8px rgba(0, 0, 0, 0.05);
	--bs-md: 0 1px 3px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.06),
		0 3px 8px rgba(0, 0, 0, 0.09);
	--bs-lg: 0 1px 4px rgba(0, 0, 0, 0.09), 0 3px 8px rgba(0, 0, 0, 0.09),
		0 4px 13px rgba(0, 0, 0, 0.13);
	--scrollbar: rgba(0, 0, 0, 0.2);
	--highlight-bg: #f6f6f6;
	--highlight-color: #2f3337;
	--highlight-comment: #656e77;
	--highlight-punctuation: var(--black-600);
	--highlight-namespace: #b75501;
	--highlight-attribute: #015692;
	--highlight-literal: #b75501;
	--highlight-symbol: #803378;
	--highlight-keyword: #015692;
	--highlight-variable: #54790d;
	--highlight-addition: #2f6f44;
	--highlight-deletion: #c02d2e;
	--theme-body-font-color: var(--black-800);
	--theme-text: #171717;
	--theme-text-subtle: #505050;
	--theme-text-invert: #fff;
	--theme-text-glow-high-contrast: #171717;
	--theme-box-shadow-light: rgba(0, 0, 0, 0.11);
	--theme-box-shadow-medium: rgba(0, 0, 0, 0.13);
	--theme-box-shadow-heavy: rgba(0, 0, 0, 0.18);
	--theme-box-shadow-extra-heavy: rgba(0, 0, 0, 0.22);
	--theme-overlay: rgba(0, 0, 0, 0.7);
	--theme-overlay-invert: #fff;
	--theme-body-background: #fff;
	--theme-body-background-medium: #f2f2f2;
	--theme-alternate-background: #171717;
	--theme-alternate-background-medium: #2f2f2f;
	--theme-border: #e6e6e6;
	--theme-table-header: #e6e6e6;
	--theme-table-row-header: #fafafa;
	--theme-table-border-dark: #d2d2d2;
	--theme-hover-base: #2f2f2f;
	--theme-hover-invert: #fafafa;
	--theme-border-white-high-contrast: rgba(255, 255, 255, 0);
	--theme-border-yellow-high-contrast: rgba(0, 0, 0, 0);
	--theme-code-header: #e6e6e6;
	--theme-code-block: #f2f2f2;
	--theme-inline-code: #e6e6e6;
	--theme-code-highlight-background: #fff4ce;
	--theme-visited: #624991;
	--theme-score-low-off: rgba(168, 0, 0, 0.3);
	--theme-score-low: #b62626;
	--theme-score-medium-off: rgba(255, 187, 0, 0.3);
	--theme-score-medium: #ffb900;
	--theme-score-high-off: rgba(72, 157, 72, 0.3);
	--theme-score-high: #2a8b2a;
	--theme-hyperlink: #0065b3;
	--theme-primary-base: #0078d4;
	--theme-primary-background: #d7eaf8;
	--theme-primary-background-glow-high-contrast: #d7eaf8;
	--theme-primary-dark: #004173;
	--theme-primary-hover: #0065b3;
	--theme-primary-active: #00579a;
	--theme-primary-box-shadow: rgba(0, 101, 179, 0.3);
	--theme-primary-invert: #fff;
	--theme-secondary-base: #a2a2a2;
	--theme-secondary-background: #e6e6e6;
	--theme-secondary-background-glow-high-contrast: #e6e6e6;
	--theme-secondary-dark: #2f2f2f;
	--theme-secondary-hover: #d2d2d2;
	--theme-secondary-active: #d2d2d2;
	--theme-secondary-box-shadow: rgba(0, 0, 0, 0.3);
	--theme-secondary-invert: #000;
	--theme-tertiary-base: #243a5e;
	--theme-tertiary-background: #061329;
	--theme-tertiary-background-glow-high-contrast: #061329;
	--theme-tertiary-dark: #a4b2c9;
	--theme-tertiary-hover: #14294c;
	--theme-tertiary-active: #70819f;
	--theme-tertiary-box-shadow: rgba(38, 23, 63, 0.3);
	--theme-tertiary-invert: #fff;
	--theme-success-base: #107c10;
	--theme-success-background: #dff6dd;
	--theme-success-background-glow-high-contrast: #dff6dd;
	--theme-success-dark: #054b16;
	--theme-success-hover: #0b6413;
	--theme-success-active: #054b16;
	--theme-success-box-shadow: rgba(72, 157, 72, 0.3);
	--theme-success-invert: #fff;
	--theme-info-base: #8661c5;
	--theme-info-background: #efd9fd;
	--theme-info-background-glow-high-contrast: #efd9fd;
	--theme-info-dark: #3b2e58;
	--theme-info-hover: #8661c5;
	--theme-info-active: #624991;
	--theme-info-box-shadow: rgba(32, 24, 67, 0.3);
	--theme-info-invert: #fff;
	--theme-warning-base: #ffb900;
	--theme-warning-background: #fff4ce;
	--theme-warning-background-glow-high-contrast: #fff4ce;
	--theme-warning-dark: #6a4b16;
	--theme-warning-hover: #d19501;
	--theme-warning-active: #966802;
	--theme-warning-box-shadow: rgba(255, 187, 0, 0.3);
	--theme-warning-invert: #000;
	--theme-danger-base: #a80000;
	--theme-danger-background: #fde7e9;
	--theme-danger-background-glow-high-contrast: #fde7e9;
	--theme-danger-dark: #470001;
	--theme-danger-hover: #870000;
	--theme-danger-active: #630001;
	--theme-danger-box-shadow: rgba(168, 0, 0, 0.3);
	--theme-danger-invert: #fff;
	--theme-facepile-red: #a80000;
	--theme-facepile-teal: #328e9f;
	--theme-facepile-blue: #0078d4;

	#docs-markdown-editor .s-editor-btn:focus {
		box-shadow: 0 0 0 4px transparent;
	}

	#docs-markdown-editor .s-input,
	#docs-markdown-editor .s-textarea {
		font-family: var(--theme-body-font-family);
	}
	#docs-markdown-editor .w100 {
		/* width: 100% !important; */
		width: inherit !important;
	}

	#docs-markdown-editor .grid {
		grid-column-gap: 0;
	}

	.s-editor-btn.focus-visible {
		outline-color: var(--theme-text) !important;
		outline-offset: 0.25rem;
		outline-style: dashed;
		outline-width: 0.125rem;
	}

	$tooltip-arrow-width: 0.8rem !default;
	$tooltip-arrow-height: 0.4rem !default;
	> .tooltip {
		margin-top: 12px;
		position: absolute;
		width: auto;
		top: 100%;
		white-space: nowrap;
		z-index: 1000;
		background-color: var(--theme-body-background);
		border: 1px solid var(--theme-border);
		box-shadow: 0 6.4px 14.4px 0 var(--theme-box-shadow-medium),
			0 1.2px 3.6px 0 var(--theme-box-shadow-light);
		padding: 0.5rem;
		border-radius: 3px;
		color: var(--theme-text);
		.tooltip-arrow {
			position: absolute;
			display: block;
			width: $tooltip-arrow-width;
			height: $tooltip-arrow-height;
			bottom: -7px;

			&::after {
				position: absolute;
				left: calc(50%);
				bottom: 100%;
				top: -3px;
				display: block;
				width: 0;
				height: 0;
				pointer-events: none;
				content: ' ';
				border-color: transparent;
				border-style: outset outset solid;
				margin-left: 1px;
				margin-top: 2px;
				border-width: 7px;
				border-top-color: var(--theme-body-background);
			}
		}
	}

	@import '../../node_modules/@stackoverflow/stacks-editor/dist/styles';
	@import '../../node_modules/@stackoverflow/stacks/dist/css/stacks';
}
