.tabcontainer
{
	flex-grow: 1;
	flex-direction: column;

	> .tabs
	{
		flex-grow: 0;
		flex-shrink: 0;

		> .button
		{
			padding: 5px 10px;
			border-radius: 4px 4px 0px 0px;
			opacity: 0.2;
			font-family: Roboto;
			font-size: 13px;
			background-color: #aaa;

			.iconpanel
			{
				margin-right: 4px;
			}

			&:hover
			{
				opacity: 0.5;
			}

			&.active
			{
				opacity: 1;
			}
		}
	}

	> .sheets
	{
		border: 4px solid #aaa;
		border-radius: 0px 2px 2px 2px;
		flex-grow: 1;
		flex-direction: column;

		> :not( .active )
		{
			display: none;
		}
	}

	&.tabs-bottom
	{
		flex-direction: column-reverse;

		> .tabs
		{
			padding-left: 5px; // just to get out of the sheet border radius
		}

		> .tabs .button
		{
			border-radius: 0px 0px 4px 4px;
		}

		> .sheet
		{
			border-radius: 3px 3px 3px 0px;
		}
	}

	&.tabs-left
	{
		flex-direction: row;

		> .tabs
		{
			padding-top: 5px; // just to get out of the sheet border radius
			flex-direction: column;
		}

		> .tabs .button
		{
			border-radius: 4px 0 0px 4px;
		}

		> .sheet
		{
			border-radius: 0px 3px 3px 3px;
		}
	}
}