@import "node_modules/bootstrap/scss/bootstrap";
@import "node_modules/awesomplete/awesomplete";
@import "node_modules/flatpickr/dist/flatpickr";
@import "node_modules/flatpickr/dist/themes/airbnb";
@import "node_modules/codemirror/lib/codemirror";
@import "node_modules/frappe-datatable/dist/frappe-datatable";

$spacer-1: 0.25rem;
$spacer-2: 0.5rem;
$spacer-3: 1rem;
$spacer-4: 2rem;
$spacer-5: 3rem;

@import "./indicators.scss";

$page-width: 500px;

html {
	font-size: 12px;
}

.desk-body {
	border-left: 1px solid $gray-300;
	min-height: 100vh;
}

.desk-center {
	border-left: 1px solid $gray-300;
}

.hide {
	display: none !important;
}

.page {
	padding-bottom: $spacer-4;

	.page-nav {
		padding: $spacer-2 $spacer-3;
		background-color: $gray-100;
		border-bottom: 1px solid $gray-300;

		.btn {
			margin-left: $spacer-2;
		}
	}

	.page-title {
		font-weight: bold;
		padding: $spacer-4;
		padding-bottom: 0;
	}

	.page-links {
		padding: $spacer-3 $spacer-4;

		.page-link {
			display: inline-block;
		}
	}

	.page-error {
		text-align: center;
		padding: 200px 0px;
	}
}

.form-body {
	padding: $spacer-3 $spacer-4;

	.form-check {
		margin-bottom: $spacer-2;

		.form-check-input {
			margin-top: 0.25rem;
		}
		.form-check-label {
			margin-left: $spacer-1;
		}
	}

	.form-control.font-weight-bold {
		background-color: lightyellow;
	}

	.alert {
		margin-top: $spacer-3;
	}
}

.list-search {
	padding: $spacer-3 $spacer-4;
}

.list-body {
	.list-row {
		padding: $spacer-2 $spacer-4;
		border-bottom: 1px solid $gray-200;
		cursor: pointer;

		.checkbox {
			margin-right: $spacer-2;
		}

		a, a:hover, a:visited, a:active {
			color: $gray-800;
		}
	}

	.list-row:hover {
		background-color: $gray-100;
	}

	.list-row.active {
		background-color: $gray-200;
	}
}


.dropdown-item {
	padding: $spacer-2 $spacer-3;
}

.bottom-right-float {
	position: fixed;
	margin-bottom: 0px;
	bottom: $spacer-3;
	right: $spacer-3;
	max-width: 200px;
	padding: $spacer-2 $spacer-3;
}

.desk-menu {
	background-color: $gray-200;

	.list-row {
		border-bottom: 1px solid $gray-200;
	}

	.list-row:hover {
		background-color: $gray-300;
	}

	.list-row.active {
		background-color: $gray-400;
	}
}

.print-page {
	padding: $spacer-5;
	line-height: 1.8;

	td, th {
		padding: $spacer-2;
	}
}

.table-page-wrapper {
	width: 100%;
	padding: $spacer-3 $spacer-4;
}

.table-wrapper {
	margin-top: $spacer-4;
	margin-bottom: $spacer-4;
}

.table-toolbar {
	margin-top: $spacer-2;
}

.data-table {
	.body-scrollable {
		border-bottom: 0px !important;

		tr:first-child {
			.data-table-col {
				border-top: 0px !important;
			}
		}
	}

	thead td {
		background-color: $gray-200 !important;
	}

	.data-table-cell .edit-cell {
		padding: 0px !important;

		input, textarea {
			border-radius: none;
			margin: none;
			padding: $spacer-2;
		}

		.awesomplete > ul {
			position: fixed;
			left: auto;
			width: auto;
			min-width: 120px;
		}
	}
}

.CodeMirror {
	font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
	border: 1px solid $gray-300;
	border-radius: 0.25rem;
	padding: $spacer-2;
}

.awesomplete {
	display: block;

	> ul > li {
		padding: .75rem .375rem;
	}

	> ul > li:hover {
		background: $gray-300;
		color: $body-color;
	}

	> ul > li[aria-selected="true"] {
		background: $gray-300;
		color: $body-color;
	}

	> ul > li[aria-selected="true"]:hover {
		background: $gray-300;
		color: $body-color;
	}

	li[aria-selected="true"] mark, li[aria-selected="false"] mark {
		background: inherit;
		color: inherit;
		padding: 0px;
	}

}


mark {
	padding: none;
	background: inherit;
}