DawEffectChain
{
	background-color: #3b3b3b;
	padding: 16px;
	gap: 8px;
	flex-shrink: 0;

	overflow-x: scroll;
	overflow-y: hidden;

	> .instrument
	{
		margin-right: 16px;

		.line
		{
			position: absolute;
			top: 0;
			bottom: 0;
			left: 100%;
			width: 12px;
			border-right: 2px solid #686868;
		}
	}

	.effects
	{
		gap: 16px;
	}

	.effect
	{
		background-color: #686868;
		min-width: 128px;
		height: 223px;
		padding: 8px;
		flex-direction: column;
		color: #aaa;

		.header
		{
			border-bottom: 2px solid #aaa;
			gap: 4px;
			align-items: center;
			
			.btn
			{
				background-color: #808080;
				color: #3b3b3b;
				width: 20px;
				height: 20px;
				font-size: 16px;
				flex-shrink: 0;
				justify-content: center;
				align-items: center;
				text-align: center;

				&:hover
				{
					background-color: #3b3b3b;
					color: #aaa;
				}
			}
			
			h1
			{
				font-size: 18px;
				color: #aaa;
				flex-grow: 1;
			}

			.delete-btn
			{

				&:hover
				{
					color: white;
				}
			}
		}

		.column
		{
			flex-direction: column;
		}

		.row
		{
			flex-direction: row;
		}
		
		Dropdown
		{
			flex-grow: 1;
			flex-shrink: 0;
			margin: 4px;
			background-color: #808080;
			flex-direction: row-reverse;
			justify-content: space-between;
			align-items: center;
			padding: 4px;
			color: #3b3b3b;
			font-size: 16px;
		}

		p
		{
			font-size: 16px;
		}

		&:not(.instrument)
		{
			&:not(.enabled)
			{
				opacity: 0.5;
			}
		}

	}

	.new-effect
	{
		flex-shrink: 0;
		justify-content: center;
		align-items: center;
		
		i
		{
			background-color: #686868;
			width: 32px;
			height: 32px;
			font-size: 28px;
			justify-content: center;
			align-items: center;
			text-align: center;
		}
	}

	.new-effect-panel
	{
		display: flex;
		background-color: #686868;
		color: #aaa;
		flex-direction: column;
		overflow: scroll;
		height: 210px;

		button
		{
			background-color: #808080;
			color: #3b3b3b;
			padding: 4px;
			font-size: 16px;
			flex-shrink: 0;
			align-items: center;
			gap: 8px;

			&:hover
			{
				background-color: #3b3b3b;
				color: #aaa;
			}
		}
	}
}