inv-item-trade
{
	state
	{
		i
		{
			display: none;
			
			&[title="Sent"]
			{
				color: var(--info-a0);
			}
			&[title="Received"]
			{
				color: var(--success-a0);
			}
			inv-item-trade[state="sent"] &[title="Sent"],
			inv-item-trade[state="received"] &[title="Received"]
			{
				display: initial;
			}
		}
	}

	button-container
	{
		margin-left: auto;

		button
		{
			display: none;

			body[tradeState="Proposed"] #potentialOffer &[state="proposed"],
			body[tradeState="Proposed"] inv-item-trade[direction="Offer"][invItemID][tradeItemID][state="proposed"]:not(:only-child) &[state="remove"],
			body[tradeState="In-Progress"] inv-item-trade[direction="Offer"][state="waiting"] &[state="sent"],
			body[tradeState="In-Progress"] inv-item-trade[direction="Want"][state="waiting"] &[state="received"],
			body[tradeState="In-Progress"] inv-item-trade[direction="Want"][state="sent"] &[state="received"]
			{
				display: initial;
			}
		}
	}
}trade-box
{
	display: block;

	h4
	{
		text-align: center;
	}

	&:not(:has(trade-summary)):not(:has(spinner))
	{
		display: none;
	}

	[DEFAULT-APPEND] > div
	{
		text-align: center;
		padding: var(--spacing-base);
	}
}
trade-message
{
	display: block;
	padding: var(--spacing-base-half);
	margin: var(--spacing-base-half);
	background: var(--primary-a20);
	border-radius: var(--border-radius);
	border-bottom-left-radius: 0;
	width: max-content;
	max-width: 80%;
	position: relative;

	&[self]
	{
		margin-left: auto;
		border-bottom-left-radius: var(--border-radius);
		border-bottom-right-radius: 0;
		background: var(--primary-a0);
	}

	timestamp
	{
		position: absolute;
		bottom: 0;
		left: 100%;
		font-size: 0.7rem;
		padding: 0.2rem;
		width: max-content;
	}

	&[self] timestamp
	{
		left: auto;
		right: 100%;
	}
}trade-summary
{
	display: block;
	position: relative;
	text-align: center;
	
	counter-parties,
	counter-party
	{
		display: block;
	}

	[SHORTCUT="acceptButton"],
	[SHORTCUT="rejectButton"]
	{
		display: none;
		
		position: absolute;
		top: var(--spacing-base);
		left: var(--spacing-base);
	}
	[SHORTCUT="rejectButton"]
	{
		left: auto;
		right: var(--spacing-base);
	}

	[SHORTCUT="sentButton"],
	[SHORTCUT="receivedButton"]
	{
		display: none;
	}

	&[state="Proposed"][selfState="Undecided"] [SHORTCUT="acceptButton"],
	&[state="Proposed"] [SHORTCUT="rejectButton"],
	&[state="In-Progress"]:has([direction="Offer"] inv-item-trade[state="waiting"]) [SHORTCUT="sentButton"],
	&[state="In-Progress"]:has([direction="Want"] inv-item-trade:not([state="received"])) [SHORTCUT="receivedButton"]
	{ 
		display: initial;
	}

	[SHORTCUT="newMessage"]
	{
		position: initial; /* override .badge position absolute */
		background-color: var(--primary-a0);
		color: var(--body-color);
	}
}