CSS state machine syntax concept

gistfile1.css

@states mainLayout {
  @state initial {
		::host {
			background-color: black;
		}

		.main-content {
			height: 95%;
		}

		#console {
			opacity: 0;
			height: 5%;
			state-trigger: consoleVisible none swipe-up;
		}

		#console .toggle-button {
			state-trigger: #consoleVisible click;
		}
	}

	@state consoleVisible {
		::host {
			background-color: darkGray;
		}

		.main-content {
			height: 80%;
		}

		#console {
			opacity: 1;
			height: 20%;
			state-trigger: initial swipe-down;
		}

		#console .close-button {
			state-trigger-target: initial;
			state-trigger-action: click;
			state-trigger-transition: none;
		}
	}

	@transition initial consoleVisible 0.3s {
		@keyframe 80% {
			.main-content {
				height: 75% !timing(ease-in);
			}

			#console {
				opacity: 1;
				height: 25% !timing(ease-in);
			}
		}
	}

	@transition consoleVisible initial 0.3s linear;
}