@import "app/_empty-here.scss";
@import "app/_hud.scss";
@import "app/_load-screen.scss";
@import "app/_error-screen.scss";
* {
	padding: 0;
	margin: 0;
}

html, body {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 400;
}

body {
	background-color: $color-black;
	color: $color-text-light;

	font-size: 15px;
  line-height: 1.45;
  letter-spacing: 0.01em;
}

.screen {
	display: none;

	&.a-show {
		display: block;
	}
}

.sidebar {
	width: 100%;
}

.main-container,
.main-container {
	width: 100%;
}

.card.script-action, .card.device-action {
	max-width: 280px;

	.card-content {
		cursor: default;

		transition-duration: .2s;
		transition-property: color, opacity, background;
	}

	&:not(.card-success):not(.card-error):not(.card-danger) {
		.card-content {
			@include hover_touch {
				color: $color-black;
				background: $color-warning;
			}
		}
	}

	.action-details-btn {
    color: $color-black;
    font-size: 34px;
    position: relative;
    right: -10px;
	}

	&.loading-state {
		position: relative;
		border-color: $color-warning;

		.device-icon-container {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			display: flex;
	    flex-direction: row;
    	align-items: center;

			width: 100%;
			height: 100%;
			background: $color-warning;

			.device-icon {
				color: $color-black;

				.ph, .ph-bold {
					transform-origin: 50% 50%;
  				animation: icon_spin 1.2s linear infinite;
				}
			}
		}
	}
}

.sidebar-container {
	width: 100%;
	@include media_up("xl") {
		max-width: 260px;
	}

	.sidebar {
		.list-nav {
			@include media_between("sm", "xl") {
				flex-direction: row;
				max-width: 100%;
		    justify-content: space-between;

		    .list-item {
		    	width: -webkit-fill-available;
		    }
			}
		}
	}
}

.main-container {
	& > .table {
		@include media_between("sm", "xl") {
			width: 100%;
		}
	}
}

$base-branch-lvl-padding: $space-10 + $space-5;

.tree {
	display: flex;
	flex-direction: column;
	gap: $space-5;

	.branch {
		display: flex;
		flex-direction: row;
		align-items: center;

		&:not(.lvl-0) {
			position: absolute;
			left: -20px;
			top: -150%;
			opacity: 0;
			visibility: hidden;
			transition-duration: .2s;
			transition-property: opecity, visibility, left;

			&.a-show {
				opacity: 1;
				visibility: visible;
				position: relative;
				top: 0;
				left: 0;
			}
		}

		.title {
			font-size: $font-size-xl;
		}

		.branch-container {
			padding: $space-3;

			display: flex;
			flex-direction: column;
			gap: $space-3;
			width: max-content;
		}

		&.lvl {
			&-0 {
				padding-left: 0;
			}

			&-1 {
				padding-left: $base-branch-lvl-padding;
			}

			&-2 {
				padding-left: $base-branch-lvl-padding * 2;
			}

			&-3 {
				padding-left: $base-branch-lvl-padding * 3;
			}
		}

		.show-childs {
			transform: rotate(0);

			transition-duration: .2s;
			transition-property: transform, color;

			&.opened {
				transform: rotate(90deg);
			}

			&:hover {
				color: $color-accent;
			}
		}

		&.is-single {
			.show-childs {
				display: none;
			}
		}
	}
}

#area-actions-modal {
	.action-details-btn {
		display: none;
	}
}

#area-devices-modal,
#area-actions-modal {
	.modal-body {
		position: relative;
		min-height: 300px;

		.loader {
			margin: auto;
			position: relative;
			top: 120px;
		}
	}
}

.top-bar {
	width: 100%;

	& > .row {
		justify-content: space-between;
		align-items: center;
	}
}

.component.place-in-area-component {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: $space-4;
	align-items: center;

	.form-container {
		margin-top: 0;
		opacity: 0;
		visibility: hidden;

		position: absolute;
		background: $color-black;
	  padding: 10px;
	  border: 2px solid $color-primary;
	  width: 300px;

		transition-duration: .2s;
		transition-property: opacity, visibility, margin-top;

		&.a-show {
			opacity: 1;
			visibility: visible;
			margin-top: -50px;
		}

		&.a-hide {
			margin-top: -80px;
		}

		.hide-place-in-area {
			position: absolute;
	    z-index: 1;
	    right: $space-1;
	    top: $space-1;
		}
	}	

	.remove-parent-id {
		@include hover_touch {
			color: $color-black;
			background: $color-warning;
		}
	}
}

#areas-tree {
	.sidebar-container {
		display: none !important;
	}
}

#device-popup, #area-details-modal {
	.table .alias-view-container {
		display: flex;
	  flex-direction: row;
	  align-items: center;
	  gap: $space-2;
	}
}