intent-box
{	
	display: block;
	position: relative;

	section
	{
		margin-bottom: 0;
	}
	
	header
	{
		position: relative;
		border-bottom: 1px solid var(--border-color);
		padding-bottom: var(--spacing-base-half);
		margin-bottom: var(--spacing-base-half);
		cursor: pointer;

		[SHORTCUT="title"]
		{
			font-size: 1.5em;
			font-weight: bold;
		}

		[SHORTCUT="quantity"]
		{
			position: absolute;
			bottom: var(--spacing-base-half);
			right: 0;
			font-size: 1em;

			spinner
			{
				width: 2em;
				height: 2em;
			}
		}
	}

	[SHORTCUT="filtersCollapseController"]
	{
		float: right;
		transition: var(--transition-base);

		&.open
		{
			rotate: -90deg;
		}
	}

	[SHORTCUT="filtersCollapse"]
	{
		width: 100%;
		
		&.show
		{
			margin-bottom: var(--spacing-base-half);
		}
	}

	[SHORTCUT="minimise"]
	{
		position: absolute;
		top: 0;
		right: var(--spacing-base);

		transition: var(--transition-base);

		&.ri-add-line
		{
			transform: rotate(90deg);
		}
	}

	inv-item-container spinner
	{
		display: block;
	}


	/*hack for hover image, otherwise it appears underneath another intent-box if its below*/
	&#New	{z-index: 5;}
	&#Offer	{z-index: 4;}
	&#Want {z-index: 3;}
	&#Keep {z-index: 2;}
	&#Non-transferable {z-index: 1;}
}
inv-item-editable
{
	/*
	anchor: --inv-item-editable-anchor;
	*/

	[SHORTCUT="editIcon"]
	{
		margin-left: auto;
	}

	&[intent="Non-transferable"] [SHORTCUT="editIcon"]
	{
		display: none;
	}

	add-button-container
	{
		display: none;
		margin-left: auto;
	}

	&[fromSearch="true"] 
	{
		add-button-container
		{
			display: block;
		}

		[SHORTCUT="editIcon"]
		{
			display: none;
		}
	}

	&.tag-set add-button-container button[intent="Offer"]
	{
		display: none;
	}

	button-container:popover-open
	{
		--button-container-width: 5.5rem; /* hate this, because position right doesnt seem to work so using this to shift it over */
		width: var(--button-container-width);

		background: var(--card-bg);
		border-radius: var(--border-radius-sm);
		z-index: 9999;

		position: fixed;

		/* popover anchor position doesnt work in firefox here, but using it in hover image seems to work no idea why*/
		/*
		position: absolute;
		position-anchor: --inv-item-editable-anchor;
		position-area: top left;
		*/

		display: flex;
		flex-direction: column;
		row-gap: 0.2rem;
		padding: 0.2rem;

		button
		{
			display: block;
			width: 100%;
		}

		hr
		{
			margin: var(--spacing-base-half);
		}
	}

	[SHORTCUT="editForm"]
	{
		width: 100%;

		input, select, button
		{
			font-size: 0.8rem;
			padding: 0.2rem;
			padding-left: 0.6rem;
			padding-right: 0.4rem;
			min-height: 0;
		}

		select
		{
			flex-grow: 0;
			max-width: 4rem;
			background-position: right 0rem center;
		}

		labeled-input
		{
			flex-grow: 1;
			margin-bottom: 0;
			
			label
			{
				font-size: 0.6rem;
				left: calc(var(--border-radius));
			}
		}

		group
		{
			padding-top: var(--spacing-base-half);

			button
			{
				height: initial;
				padding-left: 0.4rem;
				padding-right: 0.4rem;
			}
		}
	}

	&[intent="Offer"]
	{
		button[intent="Offer"]
		{
			display: none;
		}
	}

	&[intent="Want"]
	{
		button[intent="Offer"],
		button[intent="Want"],
		button[intent="Keep"]
		{
			display: none;
		}
	}

	&[intent="Keep"]
	{
		button[intent="Keep"],
		button[intent="Want"]
		{
			display: none;
		}
	}

	&[intent="Not-Owned"]
	{
		button[intent="Offer"],
		button[intent="Want"],
		button[intent="Keep"]
		{
			display: none;
		}
	}
}