* {
	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: 400px;
}

.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) {
		&:hover {
			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;
				}
			}
		}
	}
}

@import "app/_hud.scss";
@import "app/_load-screen.scss";
@import "app/_error-screen.scss";