DawDrawer
{
	max-width: 375px;
	flex-grow: 1;
	flex-shrink: 0;
	font-size: 16px;
	gap: 4px;
	margin: 4px;
	margin-right: 0px;
	padding: 8px;

	flex-direction: column;

	h1
	{
		font-size: 16px;
		color: #aaa;
		flex-shrink: 0;
	}

	.instruments
	{
		flex-grow: 1;
		flex-direction: column;
		gap: 4px;
		overflow: scroll;

		.instrument
		{
			flex-shrink: 0;
			width: 100%;
			min-height: 100px;
			background-color: #3d3d3d;
			flex-direction: column;

			TextEntry
			{
				color: #aaa;
				font-size: 16px;
				font-weight: bold;
			}

			.btn.remove
			{
				position: absolute;
				top: 50%;
				right: 0px;
				padding: 4px;
				color: #b93a3a;
				font-size: 16px;
				transform: translateY(-50%);
			}

			&.selected
			{
				background-color: #505050;
			
			}
		}
	}

	> .add
	{
		flex-shrink: 0;
		flex-direction: row;
		padding: 8px;
		background-color: #3d3d3d;
		align-items: center;
		gap: 8px;
		color: #aaa;
	}

	// > .search
	// {
	// 	flex-direction: row;
	// 	padding: 8px;
	// 	background-color: #3d3d3d;
	// 	align-items: center;

	// 	i
	// 	{
	// 		font-size: 16px;
	// 		color: #aaa;
	// 	}

	// 	TextEntry
	// 	{
	// 		flex-grow: 1;
	// 		margin-left: 8px;

	// 		.placeholder
	// 		{
	// 			color: #aaa;
	// 		}
	// 	}
	// }

	// > .content
	// {
	// 	flex-grow: 1;
	// 	flex-direction: row;
	// 	gap: 4px;

	// 	> div
	// 	{
	// 		flex-direction: column;
	// 		background-color: #3b3b3b;
	// 		padding: 16px;

	// 		h1
	// 		{
	// 			font-size: 16px;
	// 			color: #aaa;
	// 		}
	// 	}

	// 	.categories
	// 	{
	// 		flex-grow: 1;
	// 		background-color: #3d3d3d;
	// 	}

	// 	.list
	// 	{
	// 		flex-grow: 3;
	// 	}
	// }
}