/* Make Bootstrap automatically switch dark/light theme based on the dark mode
 * setting of the OS/browser.
 * See: https://github.com/twbs/bootstrap/issues/37973#issuecomment-1987272883
 */
@media (prefers-color-scheme: dark) {
  /* These values were copied directly from dev tools. */
  :root {
    color-scheme: dark;
    --bs-body-color: #dee2e6;
    --bs-body-color-rgb: 222,226,230;
    --bs-body-bg: #212529;
    --bs-body-bg-rgb: 33,37,41;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255,255,255;
    --bs-secondary-color: rgba(222, 226, 230, 0.75);
    --bs-secondary-color-rgb: 222,226,230;
    --bs-secondary-bg: #343a40;
    --bs-secondary-bg-rgb: 52,58,64;
    --bs-tertiary-color: rgba(222, 226, 230, 0.5);
    --bs-tertiary-color-rgb: 222,226,230;
    --bs-tertiary-bg: #2b3035;
    --bs-tertiary-bg-rgb: 43,48,53;
    --bs-primary-text-emphasis: #6ea8fe;
    --bs-secondary-text-emphasis: #a7acb1;
    --bs-success-text-emphasis: #75b798;
    --bs-info-text-emphasis: #6edff6;
    --bs-warning-text-emphasis: #ffda6a;
    --bs-danger-text-emphasis: #ea868f;
    --bs-light-text-emphasis: #f8f9fa;
    --bs-dark-text-emphasis: #dee2e6;
    --bs-primary-bg-subtle: #031633;
    --bs-secondary-bg-subtle: #161719;
    --bs-success-bg-subtle: #051b11;
    --bs-info-bg-subtle: #032830;
    --bs-warning-bg-subtle: #332701;
    --bs-danger-bg-subtle: #2c0b0e;
    --bs-light-bg-subtle: #343a40;
    --bs-dark-bg-subtle: #1a1d20;
    --bs-primary-border-subtle: #084298;
    --bs-secondary-border-subtle: #41464b;
    --bs-success-border-subtle: #0f5132;
    --bs-info-border-subtle: #087990;
    --bs-warning-border-subtle: #997404;
    --bs-danger-border-subtle: #842029;
    --bs-light-border-subtle: #495057;
    --bs-dark-border-subtle: #343a40;
    --bs-heading-color: inherit;
    --bs-link-color: #6ea8fe;
    --bs-link-hover-color: #8bb9fe;
    --bs-link-color-rgb: 110,168,254;
    --bs-link-hover-color-rgb: 139,185,254;
    --bs-code-color: #e685b5;
    --bs-highlight-color: #dee2e6;
    --bs-highlight-bg: #664d03;
    --bs-border-color: #495057;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    --bs-form-valid-color: #75b798;
    --bs-form-valid-border-color: #75b798;
    --bs-form-invalid-color: #ea868f;
    --bs-form-invalid-border-color: #ea868f;
  }
  .btn-close {
    filter: var(--bs-btn-close-white-filter);
  }
}


/* scaffolding */
:root {
	font-family: sans-serif;
}

/* layout */

html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
}

header {
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--vscode-panel-border);
	background: var(--vscode-panel-background);
}


body {
	display: flex;
	flex-direction: column;
}

#middle {
	flex-shrink: 0;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

#editor {
	flex: 1 0 0;
	overflow: auto;
	display: flex;
	font-size: 14px;
}
#editor > .cm-editor {
	background-color: var(--vscode-editor-background);
	flex: 1 0 0;
}
#editor .cm-gutters {
	background-color: inherit;
}

.schematic {
	border-top: 1px solid var(--vscode-panel-border);
}

body:not(.vscode) .simulator {
    border-left: 1px solid var(--vscode-panel-border);
}

@media screen and (min-width: 800px) {
	#middle {
		flex-direction: row;
		overflow: hidden;
		flex-basis: 0;
	}
	.schematic {
		border-top: none;
	}
	#output {
		flex: 1 0 0;
	}
}

/* header */

header h1 {
	margin: 8px;
	font-size: 1.3rem;
}

header > *:not(h1) {
	margin: 4px 4px 4px 0;
}

#target .project-name {
	display: flex;
	justify-content: space-between;
}
#target .project-name .buttons {
	margin-left: 16px;
}
.edit-symbol {
	transform: scaleX(-1);
}