GraphEditorView {
    flex-direction: column;
    background: #f00;
    flex: 1;
}

GraphEditorView #TitleBar {

}

GraphEditorView > #content {
    flex: 1;
    flex-direction: row;
}

GraphEditorView > #content > #GraphView {
    flex: 1;
}

GraphEditorView > #content > #inspector {
    width: 400;
}

MaterialGraphView {
    background-color: rgb(20, 21, 21);
}

MaterialNodeView.graphElement.node.MaterialNode {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
}

MaterialNodeView #previewContainer,
MaterialNodeView #controls {
    background-color: rgba(63, 63, 63, 0.8);
}

MaterialNodeView #controls.notEmpty {
    padding-top: 4;
    padding-bottom: 4;
}

MaterialNodeView #previewContainer > #preview  {
    width: 200;
    height: 200;
    align-items:center;
}

MaterialNodeView #previewContainer > #preview > #collapse {
    background-color: #000;
    border-color: #F0F0F0;
    width: 0;
    height: 0;
    opacity: 0;
    border-radius: 1;
    border-top-width: 1;
    border-bottom-width: 1;
    border-left-width: 1;
    border-right-width: 1;
    margin-top: 4;
    align-items:center;
    justify-content:center;
}


MaterialNodeView #previewContainer:hover > #preview > #collapse {
    width: 20;
    height: 20;
    opacity: 0.6;
}

MaterialNodeView #previewContainer > #preview > #collapse > #icon
{
    background-image : resource("GraphView/Nodes/PreviewCollapse.png");
    width: 16;
    height: 16;
}
MaterialNodeView #previewContainer > #preview > #collapse:hover {
    opacity: 1.0;
}

MaterialNodeView #previewContainer.collapsed > #preview > #collapse {
    height: 0;
}

MaterialNodeView #previewContainer > #expand {
    align-self: center;
    width: 56;
    height: 16;
    flex-direction: row;
    justify-content:center;
}

MaterialNodeView #previewContainer > #expand > #icon {
    align-self: center;
    background-image : resource("GraphView/Nodes/PreviewExpand.png");
    width: 16;
    height: 16;
}

MaterialNodeView #previewContainer.collapsed > #expand:hover {
    background-color: #2B2B2B;
}

MaterialNodeView #previewContainer.expanded > #expand {
    height: 0;
}

MaterialNodeView > #resize {
    background-image : resource("GraphView/Nodes/NodeChevronLeft.png");
    position-type: absolute;
    position-right: 5;
    position-bottom: 5;
    width: 10;
    height: 10;
    cursor: resize-up-left;
}

PortInputView {
    width: 212;
    height: 22;
    padding-top: 1;
    flex-direction: row;
    justify-content: flex-end;
}

PortInputView > #container {
    background-color: rgba(63, 63, 63, 0.8);
    flex-direction: row;
    align-items: center;
    padding-left: 8;
    margin-right: 12;
    border-left-width: 1;
    border-top-width: 1;
    border-right-width: 1;
    border-bottom-width: 1;
    border-color: rgba(25, 25, 25, 0.8);
    border-radius: 2;
}

PortInputView > #container > #slot {
    width: 8;
    height: 8;
    background-color: #2B2B2B;
    border-color: #232323;
    border-top-width: 1;
    border-bottom-width: 1;
    border-left-width: 1;
    border-right-width: 1;
    border-radius: 4;
    margin-left: 6;
    margin-right: 6;
    align-items: center;
    justify-content: center;
}

PortInputView > #edge {
    position-type: absolute;
    position-right: 0;
    position-top: 10.5;
    height: 2;
    width: 20;
    background-color: #ff0000;
}

PortInputView > #container > #slot > #dot {
    width: 4;
    height: 4;
    background-color: #ff0000;
    border-radius: 4;
}

PortInputView.typeMatrix4 > #container > #slot > #dot,
PortInputView.typeMatrix3 > #container > #slot > #dot,
PortInputView.typeMatrix2 > #container > #slot > #dot {
    background-color: #8FC1DF;
}

PortInputView.typeMatrix4,
PortInputView.typeMatrix3,
PortInputView.typeMatrix2 {
    edge-color: #8FC1DF;
}

PortInputView.typeTexture2D > #container > #slot > #dot {
    background-color: #FF8B8B;
}

PortInputView.typeTexture2D {
    edge-color: #FF8B8B;
}

PortInputView.typeVector4 > #container > #slot > #dot {
    background-color: #FBCBF4;
}

PortInputView.typeVector4 {
    edge-color: #FBCBF4;
}

PortInputView.typeVector3 > #container > #slot > #dot {
    background-color: #F6FF9A;
}

PortInputView.typeVector3 {
    edge-color: #F6FF9A;
}

PortInputView.typeVector2 > #container > #slot > #dot {
    background-color: #9AEF92;
}

PortInputView.typeVector2 {
    edge-color: #9AEF92;
}

PortInputView.typeVector1 > #container > #slot > #dot {
    background-color: #84E4E7;
}

PortInputView.typeVector1 {
    edge-color: #84E4E7;
}

TextureSlotControlView {
    flex-direction: row;
    align-items: center;
}

TextureSlotControlView > ObjectField {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    width: 100;
}

MultiFloatSlotControlView {
    flex-direction: row;
    align-items: center;
}

MultiFloatSlotControlView > #dummy > Label {
    margin-left: 0;
    margin-right: 0;
    cursor: slide-arrow;
}

MultiFloatSlotControlView > FloatField {
    width: 30;
    margin-left: 0;
    margin-right: 0;
}

UVSlotControlView > EnumField {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    width: 40;
}

ColorRGBASlotControlView {
    flex-direction: row;
    align-items: center;
}

ColorRGBASlotControlView > ColorField {
    width: 50;
}

ColorRGBSlotControlView {
    flex-direction: row;
    align-items: center;
}

ColorRGBSlotControlView > ColorField {
    width: 50;
}

.edge.fromMatrix4, .edge.fromMatrix3, .edge.fromMatrix2 {
    edge-output-color: #8FC1DF;
}
.edge.toMatrix4, .edge.toMatrix3, .edge.toMatrix2 {
    edge-input-color: #8FC1DF;
}

.edge.fromTexture2D {
    edge-output-color: #FF8B8B;
}
.edge.toTexture2D {
    edge-input-color: #FF8B8B;
}

.edge.fromVector4 {
    edge-output-color: #FBCBF4;
}
.edge.toVector4 {
    edge-input-color: #FBCBF4;
}

.edge.fromVector3 {
    edge-output-color: #F6FF9A;
}
.edge.toVector3 {
    edge-input-color: #F6FF9A;
}

.edge.fromVector2 {
    edge-output-color: #9AEF92;
}
.edge.toVector2 {
    edge-input-color: #9AEF92;
}

.edge.fromVector1 {
    edge-output-color: #84E4E7;
}
.edge.toVector1 {
    edge-input-color: #84E4E7;
}

GraphInspectorView {
    background-color: rgb(56, 56, 56);
    flex-direction: column;
    justify-content: space-between;
    position-type: absolute;
    position-right: 0;
    position-top: 0;
    width: 600;
    height: 800;
}

GraphInspectorView * {
    font-size: 11;
}

GraphInspectorView > #top > #header {
    background-color: rgb(64, 64, 64);
    border-color: rgb(79, 79, 79);
    border-bottom-width: 1;
    flex-direction: row;
    justify-content: space-between;
}

GraphInspectorView > #top > #header > #title {
    text-color: rgb(180, 180, 180);
    font-style: bold;
    padding-left: 16;
    padding-right: 16;
    padding-top: 10;
    padding-bottom: 10;
}

GraphInspectorView > #top > #content > #selectionCount {
    text-color: rgb(180, 180, 180);
    padding-left: 16;
    padding-right: 16;
    padding-top: 10;
    padding-bottom: 10;
}

GraphInspectorView > #bottom {
    margin-bottom: 20;
}

GraphInspectorView > #bottom > #preview {
    max-height: 400;
    background-color: rgb(79, 79, 79);
}

GraphInspectorView > #top > #properties {
    border-color: rgb(41, 41, 41);
    border-top-width: 1;
    border-bottom-width: 1;
    border-left-width: 1;
    border-right-width: 1;
    margin-top: 8;
    margin-bottom: 8;
    margin-left: 8;
    margin-right: 8;
}

GraphInspectorView > #top > #properties > #header {
    border-color: rgb(41, 41, 41);
    border-bottom-width: 1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

GraphInspectorView > #top > #properties > #header > #title {
    text-color: rgb(180, 180, 180);
    font-style: bold;
    padding-top: 8;
    padding-bottom: 8;
    padding-left: 8;
    padding-right: 8;
}

GraphInspectorView > #top > #properties > #header > #addButton {
    height: 24;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 8;
}

GraphInspectorView > #top > #properties > #items {
    padding-bottom: 4;
}

GraphInspectorView > .resize {
    background-color: rgba(0, 0, 0, 0);
    position-type: absolute;
}

GraphInspectorView > .resize.vertical {
    cursor: resize-vertical;
    height: 10;
    position-left: 10;
    position-right: 10;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

GraphInspectorView > .resize.horizontal {
    cursor: resize-horizontal;
    width: 10;
    position-top: 10;
    position-bottom: 10;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

GraphInspectorView > .resize.diagonal {
    width: 10;
    height: 10;
}

GraphInspectorView > .resize.diagonal.top-left {
    cursor: resize-up-left;
    position-top: 0;
    position-left: 0;
}

GraphInspectorView > .resize.diagonal.top-right {
    cursor: resize-up-right;
    position-top: 0;
    position-right: 0;
}

GraphInspectorView > .resize.diagonal.bottom-left {
    cursor: resize-up-right;
    position-bottom: 0;
    position-left: 0;
}

GraphInspectorView > .resize.diagonal.bottom-right {
    cursor: resize-up-left;
    position-bottom: 0;
    position-right: 0;
}

GraphInspectorView > .resize.vertical.top {
    position-top: 0;
}

GraphInspectorView > .resize.vertical.bottom {
    position-bottom: 0;
}

GraphInspectorView > .resize.horzontal.left {
    position-left: 0;
}

GraphInspectorView > .resize.horizontal.right {
    position-right: 0;
}

ShaderPropertyView {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: 8;
    padding-bottom: 4;
    padding-left: 8;
    padding-right: 8;
}

ShaderPropertyView > #displayName {
    flex: 1;
    margin-right: 8;
}

ShaderPropertyView > #value {
    flex: 2;
    margin-right: 8;
}

ShaderPropertyView > #remove {
    font-size: 9;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 1;
    padding-right: 1;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
}

.nodeEditor {
    border-color: rgb(79, 79, 79);
    border-bottom-width: 1;
    padding-top: 10;
}

NodeEditorHeaderView {
    padding-left: 16;
    padding-right: 16;
    padding-bottom: 10;
    flex-direction: row;
}

NodeEditorHeaderView > #preType {
    margin-left: 10;
}

NodeEditorHeaderView > #preType,
NodeEditorHeaderView > #postType,
NodeEditorHeaderView > #type {
    text-color: rgb(180, 180, 180);
}

NodeEditorHeaderView > #title {
    text-color: rgb(180, 180, 180);
    font-style: bold;
}

.nodeEditor > .section {
    padding-bottom: 10;
}

.nodeEditor > .section.hidden {
    height: 0;
    padding-bottom: 0;
}

.nodeEditor > .section > .title {
    text-color: rgb(180, 180, 180);
    font-style: bold;
    padding-left: 16;
    padding-right: 16;
    padding-bottom: 2;
}

.nodeEditor > .section > #slots {
    flex-direction: column;
    padding-left: 15;
    padding-right: 15;
}

.nodeEditor > .section#surfaceOptions {
    padding-left: 15;
    padding-right: 15;
}

IMGUISlotEditorView {
    flex-direction: column;
    padding-bottom: 2;
}

ColorControlView {
    flex-direction: row;
}

MultiFloatControlView {
    flex-direction: row;
    padding-left: 8;
    padding-right: 8;
    padding-top: 4;
    padding-bottom: 4;
}

MultiFloatControlView > #dummy > Label {
    margin-left: 0;
    margin-right: 0;
    cursor: slide-arrow;
}

MultiFloatControlView > FloatField {
    margin-left: 0;
    margin-right: 0;
    min-width: 30;
    flex-grow: 1;
}

ObjectControlView {
    flex-direction: row;
}

ObjectControlView > ObjectField {
    flex: 1;
}

EnumControlView {
    flex-direction: row;
}

EnumControlView > EnumField {
    flex: 1;
    margin-left: 0;
    margin-right: 8;
    margin-top: 4;
    margin-bottom: 4;
}

EnumControlView > Label {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-left: 8;
    margin-right: 8;
    margin-top: 4;
    margin-bottom: 4;
}

PropertyControlView {
    padding-left: 8;
    padding-right: 8;
    padding-top: 4;
    padding-bottom: 4;
}

EnumConversionControlView {
    flex-direction: row;
    padding-left: 8;
    padding-right: 8;
    padding-top: 4;
    padding-bottom: 4;
}

EnumConversionControlView > EnumField {
    flex: 1;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;
}

EnumConversionControlView > Label {
    margin-left: 4;
    margin-right: 4;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
}



/* TEMP STUFF THAT SHOULD ACTUALLY STAY IN GRAPHVIEW */

FloatField {
	min-height: 15;
	margin-left: 4;
	margin-top: 2;
	margin-right: 4;
	margin-bottom: 2;
	padding-left: 3;
	padding-top: 1;
	padding-right: 3;
	padding-bottom: 2;
	slice-left: 3;
	slice-top: 3;
	slice-right: 3;
	slice-bottom: 3;
	selection-color: rgba(61,128,223,166);
	cursor: text;
	text-color: #B4B4B4;
	background-image: resource("Builtin Skins/DarkSkin/Images/TextField.png");
	cursor-color:#B4B4B4;
}

FloatField:focus {
	background-image: resource("Builtin Skins/DarkSkin/Images/TextField focused.png");
}

ShaderPort {
    height: 24;
    align-items: center;
    padding-left: 4;
    padding-right: 4;
    port-color: rgb(200, 200, 200);
    disabled-port-color: rgb(70, 70, 70);
}

ShaderPort.input {
    flex-direction: row;
}

ShaderPort.output {
    flex-direction: row-reverse;
}

ShaderPort > #connector {
    border-color: rgb(70, 70, 70);
    background-color: #212121;
    width: 8;
    height: 8;
    border-radius: 8;
    align-items: center;
    justify-content: center;

    margin-left: 4;
    margin-right: 4;
    border-left-width:1;
    border-top-width:1;
    border-right-width:1;
    border-bottom-width:1;
}

ShaderPort > #connector:hover {
    border-color:  #f0f0f0
}

ShaderPort > #connector > #cap
{
    background-color: #212121;
    width: 4;
    height: 4;
    border-radius: 4;
}

ShaderPort > #connector > #cap:hover
{
    background-color: #f0f0f0;
}

ShaderPort > #connector.portHighlight {
    border-color: #f0f0f0;
}

ShaderPort > #type {
    text-color: #c1c1c1;
    font-size:11;
    height:16;
    padding-left: 0;
    padding-right: 0;
    margin-left: 4;
    margin-right: 4;
}

ShaderPort.input > #type {
    text-alignment: middle-left;
}

ShaderPort.output > #type {
    text-alignment:middle-right;
}

/*******************************/
/* ShaderPorts colors by types */
/*******************************/

ShaderPort.typeTexture {
    port-color:#FF8B8B;
}

ShaderPort.typeTexture2D {
    /* Same as typeTexture */
    port-color:#FF8B8B;
}

ShaderPort.typeGraphScript {
    /* Todo: there is no such type in Unity atm */
    port-color:#E681BA;
}

ShaderPort.typeFloat4 {
    port-color:#FBCBF4;
}

ShaderPort.typeVector4 {
    /* Same as typeFloat4 */
    port-color:#FBCBF4;
}

ShaderPort.typeQuaternion {
    /* Same as typeFloat4 */
    port-color:#FBCBF4;
}

ShaderPort.typeColor {
    /* Same as typeFloat4 */
    port-color:#FBCBF4;
}

ShaderPort.typeInt {
    port-color:#9481E6;
}

ShaderPort.typeInt32 {
    /* Same as typeInt */
    port-color:#9481E6;
}

ShaderPort.typeInt64 {
    /* Same as typeInt */
    /* todo we might want to differentiate that from int32 */
    port-color:#9481E6;
}

ShaderPort.typeBool {
    port-color:#9481E6;
}

ShaderPort.typeMatrix {
    port-color:#8FC1DF;
}

ShaderPort.typeMatrix4x4 {
    /* Same as typeMatrix */
    port-color:#8FC1DF;
}

ShaderPort.typeGameObject {
    port-color:#8FC1DF;
}

ShaderPort.typeFloat {
    port-color:#84E4E7;
}

ShaderPort.typeFloat1 {
    /* Same as typeFloat */
    port-color:#84E4E7;
}

ShaderPort.typeSingle {
    /* Same as typeFloat */
    port-color:#84E4E7;
}

ShaderPort.typeDouble {
    /* Same as typeFloat */
    /* todo we might want to differentiate that from float */
    port-color:#84E4E7;
}

ShaderPort.typeFloat2 {
    port-color:#9AEF92;
}

ShaderPort.typeVector2 {
    /* Same as typeFloat2 */
    port-color:#9AEF92;
}

ShaderPort.typeComponent {
    port-color:#C9F774;
}

ShaderPort.typeFloat3 {
    port-color:#F6FF9A;
}

ShaderPort.typeVector3 {
    /* Same as typeFloat3 */
    port-color:#F6FF9A;
}

ShaderPort.typeString {
    port-color:#FCD76E;
}