@flow: flow-editor;

@body-background: #434f5a;
@header-background: #343d45;
@component-background: #38424b;
@primary-color: #08979c;

.@{flow} {
	display: flex;
	flex: 1;
	overflow: hidden;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: @body-background;
	&-left {
		display: flex;
		width: 240px;
		height: 100%;
		z-index: 1000;
		box-shadow: 2px 0px 8px -4px rgba(0, 0, 0, 1);
		background-color: @component-background;
	}
	&-content {
		display: flex;
		flex: 1;
		height: 100%;
	}
	&-right {
		display: flex;
		width: 300px;
		background-color: @component-background;
		box-shadow: -2px 0px 8px -4px rgba(0, 0, 0, 1);
		z-index: 1000;
	}
}

.@{flow}-items {
	flex: 1;
	&-wrapper {
		display: flex;
		flex-direction: column;
	}
	&-node {
		display: flex;
		flex: 1;
		align-items: center;
		padding: 16px;
		transition: all 0.3s;
		&-icon {
			margin-right: 16px;
		}
		&-name {
			font-size: 14px;
			color: #eeeeee;
		}
		&:hover {
			background-color: fade(@primary-color, 20%);
		}
	}
	.ant-collapse {
		background-color: transparent;
		border: unset;
		border-radius: unset;
		&-item {
			border: unset;
			.ant-collapse-header {
				color: #eeeeee;
			}
		}
		&-header {
			border: unset;
			border-radius: unset;
		}
		&-content {
			border: unset;
			background-color: transparent;
			&-box {
				padding: 0;
			}
		}
	}
}

.@{flow}-settings {
	.@{flow}-setting {
	}
}

.@{flow}-canvas {
	position: relative;
	flex: 1;
}
