@use "../init" as *;

.C_main
{
	display: flex;
	flex-flow: column nowrap;
	width:100%;
	padding: var(--padding);

	@include mobile()
	{

	}
}
.C_key_holder
{
	display: flex;
	flex-flow: column nowrap;
	width:100%;
}

.C_key_label
{
	margin-bottom: var(--margin);
	font-size: var(--font-size);	
}

.C_keyindex_holder
{
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	align-content: center;
	margin-bottom: var(--margin-l);
	@include mobile()
	{
		flex-flow: column nowrap;
	}

}

.C_keyindex_label
{
	display: flex;
	flex-flow: row nowrap;	
	justify-content: center;

	font-size: var(--font-size);
	margin: var(--margin);
}

.C_comp
{
	width:100%;
}

.C_button
{
	margin: var(--margin);
}

.C_editor_canvas
{
	position: fixed;
	left:0;
	top:0;
	bottom:0;
	right:0;
	background-color: rgba(128,128,128,0.5);
}

.C_editor
{
	background-color: var(--background-color);
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	width: 80vw;
}
.C_keyindex_actions
{
	display: flex;
	flex-flow: column nowrap;

	@include mobile()
	{
		flex-flow: row nowrap;
	}
}


.C_add_button_holder
{
	display: flex;
	flex-flow: row nowrap;	
	justify-content: flex-end;
}