:root {
	--bitsy-color-dialog-text-background: black;
	--bitsy-color-dialog-text-color: white;
	--bitsy-color-dialog-string-background: #cfffcf;
	--bitsy-color-dialog-string-color: #4d824d;
	--bitsy-color-dialog-number-background: #facdf2;
	--bitsy-color-dialog-number-color: #91237e;
	--bitsy-color-dialog-variable-background: #ffe98f;
	--bitsy-color-dialog-variable-color: #917d29;
	--bitsy-size-dialog-height: calc(1.2 * var(--bitsy-size-m));
}

.dialogContentViewport {
	height: var(--bitsy-size-dialog-height);
	overflow: scroll;
	display: block;
	border: solid var(--bitsy-space-xs) var(--bitsy-color-accent-2);
	border-radius: var(--bitsy-space-s);
	margin-bottom: var(--bitsy-space-m);
	line-height: 1;
	background: var(--bitsy-color-accent-1);
	white-space: normal;
}

.largeDialogPlaintextArea {
	background: var(--bitsy-color-dialog-text-background);
	color: var(--bitsy-color-dialog-text-color);
	border: none;
	min-width: var(--bitsy-size-m);
	min-height: var(--bitsy-size-dialog-height);
}

.miniDialogPlaintextArea {
	background: var(--bitsy-color-dialog-text-background);
	color: var(--bitsy-color-dialog-text-color);
	border: none;
	resize: vertical;
}

.blockEditor {
	background: var(--bitsy-color-accent-1);
	padding: var(--bitsy-space-s);
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

@keyframes actionEditorDelete {
	0% {
		transform: translateX(0px);
		opacity: 1;
	}
	100% {
		transform: translateX(30px);
		opacity: 0;
	}
}

.actionEditorDelete {
	opacity: 0;
	animation-name: actionEditorDelete;
	animation-duration: 0.2s;
}

.actionEditor {
	background: var(--bitsy-color-main-1);
	padding: var(--bitsy-space-m);
	border: solid var(--bitsy-space-xs) var(--bitsy-color-accent-2);
	border-radius: var(--bitsy-space-s);
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.actionTitle {
	font-weight: bold;
	margin-bottom: var(--bitsy-space-m);
}

.executing.actionEditor {
	background: var(--bitsy-color-main-2);
	color: var(--bitsy-color-main-1);
}

.actionEditor.inline {
	display: inline;
	padding: 0;
	padding-top: var(--bitsy-space-xs);
	padding-bottom: var(--bitsy-space-s); /* hack - useful??? */
	border: none;
}

.conditionalComparisonEditor > .actionEditor.inline {
	padding-right: var(--bitsy-space-xs);
	padding-left: var(--bitsy-space-xs);
}

@keyframes executingLeaveAnimation {
	from {
		background: var(--bitsy-color-main-2);
	}
	to {
		background: var(--bitsy-color-main-1);
	}
}

.executingLeave.actionEditor {
	animation-name: executingLeaveAnimation;
	animation-duration: 1s;
}

.selectedEditor.actionEditor {
	border: solid var(--bitsy-space-s) var(--bitsy-color-main-2);
}

.selectedEditor.actionEditor.inline {
	border: none;
}

.dialogEditor textarea {
	background: var(--bitsy-color-dialog-text-background);
	color: var(--bitsy-color-dialog-text-color);
	border: none;
	resize: vertical;
}

.sequenceDescription {
	margin-bottom: var(--bitsy-space-m);
}

.optionEditor {
	background: var(--bitsy-color-accent-1);
	margin-bottom: var(--bitsy-space-s);
	padding: var(--bitsy-space-s);
	border-radius: var(--bitsy-space-xs);
}

.optionControls {
}

.optionControls button {
	background: var(--bitsy-color-accent-2);
}

.actionBuilder {
	display: none;
	flex-direction: column;
	margin-top: var(--bitsy-space-s);
}

.selectedEditor > .blockEditor > .actionBuilder {
	display: flex;
}

.actionBuilder button {
	flex-grow: 1;
}

.actionBuilderActive .actionBuilderAdd {
	display: none;
}

.actionBuilderButton {
	background: var(--bitsy-color-accent-2);
	display: none;
}

.actionBuilderAdd {
	background: var(--bitsy-color-accent-2);
}

.actionBuilderCancel {
	background: var(--bitsy-color-main-2);
	color: var(--bitsy-color-main-1);
	display: none;
}

.actionBuilderActive .actionBuilderCancel {
	display: block;
}

.actionBuilderRoot .actionBuilderCategory {
	display: block;
}

.actionBuilder_dialog .actionBuilderButton_dialog {
	display: block;
}

.actionBuilder_flow .actionBuilderButton_flow {
	display: block;
}

.actionBuilder_exit .actionBuilderButton_exit {
	display: block;
}

.actionBuilder_item .actionBuilderButton_item {
	display: block;
}

.actionBuilder_sound .actionBuilderButton_sound {
	display: block;
}

.actionBuilder_dialog .actionBuilderButton_back {
	display: block;
}

.actionBuilder_flow .actionBuilderButton_back {
	display: block;
}

.actionBuilder_exit .actionBuilderButton_back {
	display: block;
}

.actionBuilder_item .actionBuilderButton_back {
	display: block;
}

.actionBuilder_sound .actionBuilderButton_back {
	display: block;
}

.orderControls {
	display: block;
	margin-bottom: var(--bitsy-space-s);
}

.optionEditor.selectedEditor {
	border: solid var(--bitsy-space-xs) var(--bitsy-color-main-2);
}

.addOption {
	display: flex;
}

.addOption button {
	display: none;
	flex-grow: 1;
}

.selectedEditor > .addOption button {
	display: block;
}

.functionEditor input[type="text"] {
	width: var(--bitsy-size-xxs);
}

.functionEditor input[type="number"] {
	width: var(--bitsy-size-xxs);
}

.parameterEditor {
	display: inline-flex;
}

.parameterEditor input[type="text"] {
	width: var(--bitsy-size-xxs);
}

.parameterEditor input[type="number"] {
	width: var(--bitsy-size-xxs);
}

.roomPosParameterEditor {
	padding: var(--bitsy-space-s);
	border-radius: var(--bitsy-space-xs);
	background: var(--bitsy-color-accent-1);
	display: inline-block;
}

.roomPosParameterEditor span {
	margin-right: var(--bitsy-space-s);
}

.roomPosParameterEditor button {
	background: var(--bitsy-color-accent-2);
}

.parameterUneditable {
	border-radius: var(--bitsy-space-xs);
	background: var(--bitsy-color-accent-1);
}

.conditionalComparisonEditor {
	padding: var(--bitsy-space-s);
	padding-left: 0;
	padding-bottom: var(--bitsy-space-m);
	border-bottom: solid var(--bitsy-space-xs) var(--bitsy-color-accent-2);
}

.conditionalComparisonEditor input[type="number"] {
	width: var(--bitsy-size-xxs);
}

.helpText {
	padding: var(--bitsy-space-s);
	max-width: var(--bitsy-size-m);
	background: var(--bitsy-color-accent-2);
	border-radius: var(--bitsy-space-xs);
}

.helpTextImg img {
	width: var(--bitsy-space-xl);
}

.helpTextContent {
	flex-grow: 1;
	margin-left: var(--bitsy-space-m);
}

/* dialog box */
.dialogBoxContainer {
	/* TODO : get rid of this whole wrapping thing? */
}

@font-face {
	font-family: bitsy_ascii;
	src: url(../font/bitsy_ascii_small.ttf);
}

.dialogTextboxContainer {
	background: var(--bitsy-color-dialog-text-background);
	padding: var(--bitsy-space-m);
	border-radius: var(--bitsy-space-s);
	overflow: hidden;
}

.dialogTextboxContent {
	background: var(--bitsy-color-dialog-text-background);
	color: var(--bitsy-color-dialog-text-color);
	font-family: bitsy_ascii, monospace;
	width: 32ch;
	min-height: 2ch;
	word-wrap: break-word;
	white-space: pre-wrap;
}

.dialogTextboxContent div {
	padding-left: var(--bitsy-space-s);
	padding-top: var(--bitsy-space-s);
	min-height: var(--bitsy-space-l);
}

.textboxCodeSpan {
	color: yellow; /* TODO : pick color */
}

.textboxCharacterSpan {
	display: inline-block;
}

@keyframes textEffectWvy {
	0% { transform:translateY(25%); }
	50% { transform:translateY(-25%); }
	100% { transform:translateY(25%); }
}

.textEffectWvy {
	animation-name: textEffectWvy;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

@keyframes textEffectShk {
	0% { transform:translate(10%,0%); }
	20% { transform:translate(10%,10%); }
	40% { transform:translate(0%,10%); }
	60% { transform:translate(-10%,-10%); }
	80% { transform:translate(-10%,10%); }
}

.textEffectShk {
	animation-name: textEffectShk;
	animation-duration: 0.2s;
	animation-iteration-count: infinite;
}

@keyframes textEffectRbw {
	0% { color:hsl(0,100%,50%); }
	10% { color:hsl(35,100%,50%); }
	20% { color:hsl(70,100%,50%); }
	30% { color:hsl(105,100%,50%); }
	40% { color:hsl(140,100%,50%); }
	50% { color:hsl(175,100%,50%); }
	60% { color:hsl(210,100%,50%); }
	70% { color:hsl(245,100%,50%); }
	80% { color:hsl(280,100%,50%); }
	90% { color:hsl(315,100%,50%); }
	100% { color:hsl(355,100%,50%); }
}

.textEffectRbw {
	animation-name: textEffectRbw;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}

/* todo: move into own file?*/
/* TITLE WIDGET */
.titleWidget {
	display: flex;
}

.titleWidget .textInputField {
	flex-grow: 1;
}

.titleOpenDialog {
	display: none;
	margin-left: var(--bitsy-space-s);
}

/* expression builder styles */
@keyframes expressionBuilderEnter {
	0% { margin-top: 10px; opacity: 0; }
	100% { margin-top: 0px; opacity: 1; }
}

@keyframes expressionBuilderExit {
	0% { margin-top: 0px; opacity: 1; }
	100% { margin-top: 10px; opacity: 0; }
}

@keyframes expressionBuilderSaveFlash {
	0% {
		color: var(--bitsy-color-main-1);
		background: var(--bitsy-color-main-2);
	}
	50% {
		color: var(--bitsy-color-main-2);
		background: var(--bitsy-color-main-1);
	}
	100% {
		color: var(--bitsy-color-main-1);
		background: var(--bitsy-color-main-2);
	}
}

@keyframes expressionBuilderClearShake {
	0% { transform:translate(5px,0px); }
	20% { transform:translate(3px,5px); }
	40% { transform:translate(0px,4px); }
	60% { transform:translate(-5px,-3px); }
	80% { transform:translate(-2px,5px); }
	100% { transform:translate(0px,0px); }
}

.dialogExpressionBuilderHolder {
	background: var(--bitsy-color-accent-1);
	padding: var(--bitsy-space-m);
	border: solid var(--bitsy-space-xs) var(--bitsy-color-accent-2);
	border-radius: var(--bitsy-space-s);
	margin-bottom: var(--bitsy-space-m);
	height: var(--bitsy-size-dialog-height);
}

.expressionBuilder {
	background: var(--bitsy-color-main-1);
	padding: var(--bitsy-space-m);

	animation-name: expressionBuilderEnter;
	animation-duration: 0.25s;
}

.expressionBuilderCancel {
	animation-name: expressionBuilderExit;
	animation-duration: 0.25s;
}

.expressionBuilderSave {
	animation-name: expressionBuilderExit;
	animation-delay: 0.5s;
	animation-duration: 0.25s;
}

.expressionBuilderSaveFlash {
	animation-name: expressionBuilderSaveFlash;
	animation-duration: 0.2s;
	animation-iteration-count: 2;
}

.expressionBuilderClearShake {
	animation-name: expressionBuilderClearShake;
	animation-duration: 0.2s;
}

.expressionEditorRoot {
	padding: var(--bitsy-space-m);
	border: solid var(--bitsy-space-xs) var(--bitsy-color-accent-2);
	border-radius: var(--bitsy-space-s);
	margin-bottom: var(--bitsy-space-m);
	line-height: 100%; /* hacks upon hacks */
}

.expressionBuilderInputs {
	display: flex;
	margin-bottom: var(--bitsy-space-m);
}

.expressionBuilderInputs button {
	font-family: monospace;
}

.expressionBuilder .parameterEditor input[type="text"] {
	width: auto;
}

.expressionBuilder .parameterEditor input[type="number"] {
	width: auto;
}

.addNonNumericControlBox {
	padding: var(--bitsy-space-xs);
	border-radius: var(--bitsy-space-xs);
	margin-bottom: var(--bitsy-space-s);
}

/* alternate colors */
.reverseColors {
	background: var(--bitsy-color-main-2);
	color: var(--bitsy-color-main-1);
}

.greenColor {
	background: var(--bitsy-color-dialog-string-background);
	color: var(--bitsy-color-dialog-string-color);
}

.pinkColor {
	background: var(--bitsy-color-dialog-number-background);
	color: var(--bitsy-color-dialog-number-color);
}

.goldColor {
	background: var(--bitsy-color-dialog-variable-background);
	color: var(--bitsy-color-dialog-variable-color);
}

.goldColorBackground {
	background: var(--bitsy-color-dialog-variable-background);
}

.greenColorBackground {
	background: var(--bitsy-color-dialog-string-background);
}

.greenColorText {
	color: var(--bitsy-color-dialog-string-color);
}

/* misc */
.inlineEditButtonHolder {
	margin-left: var(--bitsy-space-s);
}

.inlineEditButtonHolder button {
	padding: 0;
}

/* NEW STYLE FIXES */
#dialog .controlBox {
	display: block;
}

.dialogBoxContainer {
	display: flex;
}

.dialogBoxContainer textarea {
	background: var(--bitsy-color-dialog-text-background);
	color: var(--bitsy-color-dialog-text-color);
	flex-grow: 1;
	resize: vertical;
	padding: var(--bitsy-space-s);
	border-radius: var(--bitsy-space-xs);
}