// $material-symbols-font-path: "../../node_modules/material-symbols/";
// @import "material-symbols/outlined";
// TODO clean up all css

// Bootstrap
// preset bootstrap (scss) variables:
// scss-docs-start theme-color-variables
$primary: #2f586e; // #204251;
//$secondary: #2f586e;
$primary-bg-subtle: #d3dde6;
//$success: #7BB725;
$danger: #c50f3c;

@import url("https://cdn.jsdelivr.net/gh/vsalvino/computer-modern@main/fonts/serif.css");

@import "dropdown_variables.scss";
// import bootstrap:
@import "../../node_modules/bootstrap/scss/bootstrap";
// override some bootstrap classes
@import "dropdown_classes.scss";
// @import "floatingActionButton.scss";

// additional bootstrap compatible classes:
// material-alike button with symbol on left side
.btn.icon-button {
	@extend .d-inline-flex;
	@extend .align-items-center;
	padding-left: 16px;
	padding-right: 24px;
	gap: 8px;

	// button icon
	span,
	i {
		width: 24px;
		height: 24px;
	}
}
// preset with to 200px; useful for flex in combination with grow
.w-px-200 {
	width: 200px !important;
}

.unselectable {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#darkModeLabel,
#darkModeSwitch {
	cursor: pointer;
}

// .vertical-line{
// 	width: 1px; /* Line width */
// 	min-width: 1px;
// 	background-color: var(--bs-secondary-color); /* Line color */
// 	align-self: stretch;
// }

.rotateText {
	transform: rotate(90deg);
}

#loadingSpinner > div {
	margin-top: -50%;
	margin-left: -50%;
}

// main content:
html,
body {
	min-width: 300px;
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0px;
	padding: 0px;
}

#siteContent {
	flex-direction: column;
	flex-wrap: nowrap;
}

#canvasContainer {
	flex: none;
	height: 65%;
	margin: 0;
	padding: 0 0 0.5em 0;
	// flex-shrink: 0;
}
#propertiesContainer {
	flex: 1 1;
}
@include media-breakpoint-up(md) {
	#siteContent {
		flex-direction: row;
	}
	#canvasContainer {
		height: 100% !important;
		flex: 1 0;
		padding-bottom: 0;
		padding-right: 0.5em;
	}
	#propertiesContainer {
		height: 100% !important;
		flex: none;
	}
}

.input-group {
	> * {
		padding-top: 0.25em;
		padding-bottom: 0.25em;
	}
	> .form-control-color {
		height: 100%;
		padding-top: 0.375em;
		padding-bottom: 0.375em;
	}
}

// styles for other parts of the web app:
@import "canvas.scss";
@import "toolbarButtons.scss";
@import "symbolDB.scss";
@import "exportModal.scss";
@import "saveModal.scss";
@import "properties.scss";
