html {
	background-color: var(--bg-color);
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: var(--text-light);
	background-color: var(--bg-color);

	&.full-width {
	@include media-breakpoint-up(md) {
		.container {
				width: 90%;
				max-width: 100%;
			}
		}
	}
}

a {
	color: $text-color;
	cursor: pointer;
}

a,
a:hover,
a:active,
a:focus,
.btn,
.btn:hover,
.btn:active,
.btn:focus {
	outline: 0;
}

a.grey,
.sidebar-section a,
.control-value a,
.data-row a {
	text-decoration: none;
}

a.grey:hover,
.sidebar-section a:hover,
.control-value a:hover,
.data-row a:hover,
a.grey:focus,
.sidebar-section a:focus,
.control-value a:focus,
.data-row a:focus {
	text-decoration: underline;
}

a.disabled,
a.disabled:hover {
	color: var(--text-muted);
	cursor: default;
	text-decoration: none;
}

a.text-muted,
a.text-extra-muted {
	text-decoration: none;
}

a.badge-hover {
	&:hover .badge,
	&:focus .badge,
	&:active .badge {
		background-color: var(--bg-gray);
	}
}

.underline {
	text-decoration: underline;
}

.pointer {
	cursor: pointer;
}

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

.bold,
.strong {
	font-weight: bold;
}

pre {
	color: var(--text-light);
	white-space: pre-wrap;
}

.col-xs-1 { @extend .col-1; }
.col-xs-2 { @extend .col-2; }
.col-xs-3 { @extend .col-3; }
.col-xs-4 { @extend .col-4; }
.col-xs-5 { @extend .col-5; }
.col-xs-6 { @extend .col-6; }
.col-xs-7 { @extend .col-7; }
.col-xs-8 { @extend .col-8; }
.col-xs-9 { @extend .col-9; }
.col-xs-10 { @extend .col-10; }
.col-xs-11 { @extend .col-11; }
.col-xs-12 { @extend .col-12; }

.btn-default { @extend .btn-light; }

.hidden-xs, .hidden-sm {
	@include media-breakpoint-between(xs, sm) {
		display: none !important;
	}
}

.hidden-md {
	@include media-breakpoint-between(xs, md) {
		display: none !important;
	}
}

.hidden-lg {
	@include media-breakpoint-up(md) {
		display: none !important;
	}
}

.hidden-xl {
	@include media-breakpoint-up(lg) {
		display: none !important;
	}
}

.visible-xs {
	@include media-breakpoint-up(sm) {
		display: none !important;
	}
}

footer {
	flex-shrink: 0;
}

.pull-right {
	float: right;
}

img {
	max-width: 100%;
	height: auto;
}

.missing-image {
	background-color: var(--bg-light-gray);
	line-height: 140px;
	vertical-align: middle;
	text-align: center;
	width: 140px;
	height: 140px;
	border-radius: var(--border-radius-sm);

	&.small {
		width: 20px;
		height: 20px;
	}

	.icon {
		stroke: var(--text-muted);
	}
}


.hide-control {
	@extend .d-none;
}

.text-underline {
	text-decoration: underline;
}

.no-underline {
	text-decoration: none !important;
}

h1, h2, h3, h4 {
	color: var(--text-color);
	margin-bottom: var(--margin-md)
}

h1, h2, h3 {
	font-weight: bold;
}

p {
	margin-bottom: var(--margin-sm)
}

.small {
	font-size: var(--text-sm);
}

h1 {
	font-size: $font-size-3xl;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.025em;

	@include media-breakpoint-up(sm) {
		line-height: 2.5rem;
		font-size: $font-size-4xl;
	}
	@include media-breakpoint-up(xl) {
		line-height: 1;
		font-size: $font-size-5xl;
	}
}

h2 {
	font-size: $font-size-xl;
	font-weight: bold;

	@include media-breakpoint-up(sm) {
		font-size: $font-size-2xl;
	}
	@include media-breakpoint-up(md) {
		font-size: $font-size-3xl;
	}
}

.btn-group-sm > .btn, .btn-sm {
	padding: var(--padding-xs) var(--padding-sm);
	font-size: var(--text-md);
}

.btn-xs {
	@extend .btn-sm;
	line-height: 1.2;
	padding: var(--padding-xs) var(--padding-sm);
	font-size: var(--text-xs);
}

.input-xs {
	height: 26px;
	font-size: var(--text-md);
}

select.input-xs {
	line-height: 1.2;
}

/* popover */
.popover {
	background-color: var(--popover-bg);
	border: 0;
}

.bold {
	font-weight: 600;
}

.text-color {
	color: var(--text-color);
}

/* dropdowns */

.dropdown-item {
	border-radius: 4px;
}

.dropdown-menu {
	padding: 4px;
	font-size: var(--text-md);
	max-height: 500px;
	overflow: auto;

	.dropdown-divider {
		margin: 4px 0;
	}

	.divider {
		@extend .dropdown-divider;
	}

	a:not([href]):hover:active {
		color: $component-active-color;
	}
	a {
		transition: none;
		cursor: pointer;
	}
	a:active {
		--icon-stroke: #{$component-active-color};
	}

	.divider, .dropdown-divider {
		margin: 0px;
	}

	:last-child {
		&.dropdown-divider {
			display: none;
		}
		.divider, .dropdown-divider {
			display: none;
		}
	}
}

.custom-control.custom-switch {
	font-size: var(--text-md);
	line-height: 1.6;

	.custom-control-input ~ .custom-control-label {
		cursor: pointer;
		&:before {
			background: var(--gray-500);
			border: none;
		}
	}

	.custom-control-input:checked ~ .custom-control-label {
		&:before {
			background: $primary;
		}
	}
}

// .influxframework-card {
// 	@include card();
// }

.head-title {
	font-size: var(--text-lg);
	font-weight: 700;
	color: var(--heading-color);
}

kbd {
	background-color: var(--control-bg);
	font-family: var(--font-stack);
	color: var(--text-light);
	line-height: 1.2em;
	height: 20px;
	padding: 4px 8px;
}

.table {
	color: var(--text-color);
}

.appreciation {
	background-color: var(--appreciation-bg);
	color: var(--appreciation-color) !important;
}

.criticism {
	background-color: var(--criticism-bg);
	color: var(--criticism-color) !important;
}

.influxframework-timestamp {
	cursor: default;
}

.standard-sidebar {
	font-size: var(--text-base);

	.standard-sidebar-section .standard-sidebar-label {
		margin-bottom: var(--margin-md);
		margin-top: var(--margin-sm);
	}

	.standard-sidebar-item {
		@include flex(flex, null, center, null);
		font-size: var(--text-base);
		padding: 8px 12px;
		margin-bottom: 2px;
		border-radius: var(--border-radius-md);
		overflow: hidden;
		cursor: pointer;

		.sidebar-item-label {
			// https://css-tricks.com/flexbox-truncated-text/
			min-width: 0;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		&:focus {
			background-color: var(--sidebar-select-color);
			outline: 0;
			text-decoration: none;
		}

		&:hover {
			background-color: var(--sidebar-select-color);
			text-decoration: none;
		}

		&.selected {
			background-color: var(--sidebar-select-color);
		}

		a {
			color: var(--text-color);
			text-decoration: none;
		}

		svg {
			margin-right: var(--margin-sm);
		}
	}
}

// freeze backdrop text
#freeze {
	z-index: 1020;
	bottom: 0;
	opacity: 0;
	background-color: var(--bg-color);

	.freeze-message-container {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		display: grid;
		place-content: center;
	}

	.freeze-message {
		color: var(--text-color) !important;
	}
}

#freeze.dark {
	background-color: var(--gray-900);
}

#freeze.in {
	opacity: 0.5;
}

.msg-box {
	padding: var(--padding-xl) var(--padding-md);
	text-align: center;
	color: var(--text-muted);
}

/*rtl styles*/

.influxframework-rtl {
	text-align: right;
	.modal-actions {
		right: auto !important;
		left: 5px;
	}
	input, textarea {
		direction: rtl !important;
	}

	.checkbox .disp-area {
		margin-right: -20px;
		margin-left: 0px;
	}
}

/* broken image styling */

img.no-image {
	position: relative;
	height: 100%;
	width: 100%;
	background-color: var(--bg-light-gray);
}


@media (min-width: 768px) {
	.video-modal .modal-dialog {
		width: 700px;
	}
}

body.no-sidebar {
	@include media-breakpoint-up(md) {
		.layout-side-section {
			display: none;
		}

		.layout-main-section-wrapper {
			width: 100% !important;
		}
	}
}

.app-logo {
	width: 24px;
}

.alt-pressed .alt-underline {
	text-decoration: underline;
}

details > summary:focus {
	outline: none;
}

.ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	vertical-align: middle;
}

.ellipsis-width {
	max-width: 200px;
}

.text-extra-muted {
	color: var(--gray-500) !important;
}

.grayscale {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}

.uppercase {
	padding-bottom: var(--padding-xs);
	text-transform: uppercase;
	font-size: var(--text-sm);
	letter-spacing: 0.4px;
	color: var(--text-muted);
}

.text-regular {
	font-size: var(--text-base);
}

.text-medium {
	font-size: var(--text-md);
}

.text-small {
	font-size: var(--text-sm);
}

.text-large {
	font-size: var(--text-lg);
}

.disable-click {
	pointer-events: none;
}

.popover-title {
	display: none;
}

.highlight {
	transition: 0.5s ease background-color;
	box-shadow: var(--highlight-shadow) !important;
}

.dropdown-menu.small {
	font-size: var(--text-sm);
	min-width: 140px;
	.dropdown-item {
		padding: var(--padding-xs);
	}
}

.diffview {
	font-family: monospace;
	white-space: pre;
	word-wrap: break-word;
	color: var(--text-color);
}

.diffview .insert,
.diff-add {
	background-color: var(--diff-added);
}

.diffview .delete,
.diff-remove {
	background-color: var(--diff-removed);
}

.chart-wrapper {
	padding: 1em;
}

// REDESIGN TODO: Handling of broken images?
// img.no-image:before {
// 	.img-background();
// }

// img.no-image:after {
// 	.img-foreground();
// }

// img.img-loading:before {
// 	.img-background();
// }

// img.img-loading:after {
// 	.img-foreground();
// 	font-family: 'Octicons';
// 	content: "\f00b";
// }

/*rtl:raw:
.dropdown-menu {
	right: auto;
}
.popover {
	right: auto;
}
.chart-container {
	direction: ltr;
}
*/
