#authModal
{
	text-align: center;

	labeled-input
	{
		margin-bottom: 0;
		margin-top: var(--spacing-base);
		text-align: left;
	}

	a[SHORTCUT]
	{
		&:not([hidden])
		{
			display: block;
		}

		margin-top: var(--spacing-base);
		width: fit-content;
		margin-left: auto;
		margin-right: auto;
	}

	[SHORTCUT="termsCollapse"]
	{
		margin-bottom: var(--spacing-base);
	}

	#authSubmitButton
	{
		margin-top: var(--spacing-base);
	}

	#signInFailureMessage
	{
		color: var(--danger-a20);
	}

	#signUpSuccessMessage
	{
		color: var(--success-a20);
	}

	/* not sure why this is needed only here but not in account settings */
	group button
	{
		margin-top: var(--spacing-base);
		margin-bottom: 0;
	}

	.authSignUpCollapse
	{
		margin: 0;

		#createAnonButton
		{
			margin: var(--spacing-base-half);
		}
	}
}gallery-switch
{
	position: absolute;
	top: calc(var(--nav-height) + var(--spacing-base-half));
	left: var(--spacing-base);
}
inv-item-container
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: top;
	gap: var(--spacing-base-half);
	z-index: 0;

	transition: var(--transition-base);
}

inv-item, [extends="inv-item"]
{
	position: relative;
	display: flex;
	flex-direction: row;
	gap: 0.2rem;
	flex-wrap: wrap;
	align-items: center;
	padding: 0.2rem;
	background: var(--body-bg);
	border-radius: var(--border-radius-sm);
	transition: var(--transition-base);
	width: 100%;

	&:not([reserved="true"]):hover
	{
		background-color: var(--surface-tonal-a10);
		shadow: var(--shadow);
	}

	&:not([reserved="true"]) [SHORTCUT="reservedIcon"]
	{
		display: none;
	}

	&[reserved="true"]
	{
		color: var(--surface-tonal-a40);
		background: black;

		[SHORTCUT="reservedIcon"]
		{
			display: initial;
			color: var(--info);
			font-size: 1.3rem;
		}
	}

	currency
	{
		color: var(--success);
		font-size: 0.8rem;
		
		&:empty
		{
			display: none;
		}
	}

	note
	{
		font-style: italic;
		font-size: 0.8rem;
		border: 1px solid var(--border-color);
		border-radius: var(--border-radius-sm);
		padding: 0.1rem;
		padding-left: 0.2rem;
		padding-right: 0.2rem;

		&:empty
		{
			display: none;
		}
	}

	img
	{
		display: none;
		aspect-ratio: 314 / 486;
	}
	
	[SHORTCUT="hoverImage"]
	{
		anchor-name: --inv-item-anchor;

		&:hover
		{
			color: var(--primary-a0);

			& ~ img
			{
				display: block;
				position: absolute;
				position-anchor: --inv-item-anchor;
				position-area: bottom left;
				/* FIX hover image will get cut off the bottom of the viewport if its close enough and position-try-fallbacks doesnt seem to flip it */
				position-try: flip-block;
				position-try-fallbacks: flip-block; 
				max-width: 30vw;
				z-index: 999;
			}
		}
	}

	&.tag-set [SHORTCUT="hoverImage"]
	{
		display: none;
	}

	&.tag-set name
	{
		font-weight: bold;
		font-style: italic;
	}

	tags
	{
		display: flex;
		flex-direction: row;
		gap: 0.2rem;
		flex-wrap: wrap;
		align-items: center;
	}

	&:not([tagIDs]) name
	{
		display: none;
	}
}

[gallery-mode="true"]
{
	& inv-item,
	& [extends="inv-item"]
	{
		--row-size: 3;
		width: calc(100%/var(--row-size) - var(--spacing-base-half)*(var(--row-size) - 1)/var(--row-size));

		[SHORTCUT="hoverImage"]
		{
			display: none;
		}
			
		&:not(.tag-set)
		{ 
			tags
			{
				display: none;
			}


			img
			{
				display: initial;
				
				position: initial;
				top: initial;
				left: initial;
			}
		}
	}
}item-tag, [extends="item-tag"]
{
	border: 1px solid var(--border-color);
	background-color: var(--card-bg);
	padding: 0.1rem;
	padding-left: 0.2rem;
	padding-right: 0.2rem;
	border-radius: var(--border-radius-sm);
	font-size: 0.9rem;
}labeled-input
{
	display: block;
	position: relative;
	margin-bottom: var(--spacing-base);

	label
	{
		font-size: 0.8rem;
		background: var(--body-bg);
		position: absolute;
		left: calc(var(--border-radius) * 2);
		top: 0;
		transform: translateY(-50%);
		padding-left: var(--border-radius);
		padding-right: var(--border-radius);
		border-radius: var(--border-radius-sm);
		width: max-content;
		opacity: 1;
		transition: var(--transition-base);
	}

	input:placeholder-shown + label
	{
		opacity: 0;
	}

	[SHORTCUT="inputField"]
	{
		margin-bottom: 0;
	}

	[SHORTCUT="validationInfo"]
	{
		font-size: 0.8rem;
		color: var(--danger-a20);
	}
}
modal
{
	top: calc(var(--nav-height) + var(--spacing-base));
	margin-left: auto;
	margin-right: auto;
	background: none;
	border: none;
	color: inherit;

	transition: var(--transition-base);

	max-width: calc(var(--container-max-width) * 0.4);

	& > section 
	{
		min-width: 20rem;
		min-height: 10rem;
	}

	header 
	{
		display: flex;
		border-bottom: 1px solid var(--border-color);
		padding-bottom: var(--spacing-base);
		margin-bottom: var(--spacing-base);
		align-items: center;
		
		heading 
		{
			flex-grow: 1;
			text-align: left;
			font-size: 1.5rem;
			font-weight: bold;
		}

		button[aria-label="close"] 
		{
			padding: 0;
			width: calc(var(--font-size-base) * 2);
			aspect-ratio: 1 / 1;
			min-width: 0; /** override classless.css default **/
		}
	}

	alert
	{
		width: 100%;
	}
}

modal:popover-open 
{
	opacity: 1;
	transform: scale(1, 1);
}
@starting-style 
{
	modal:popover-open 
	{
		opacity: 0;
		transform: scale(0.7, 0.7);
	}
}

modal::backdrop 
{
	backdrop-filter: blur(5px);
	background-color: rgba(0, 0, 0, 0.2);
}/* NB blur-filter doesnt work for nested elements, ie on mobile the collapsing menu wont have the glass style */

:root
{
	--nav-height: 4rem;
}

body
{
	padding-top: calc(var(--nav-height) * 1.5);
}


nav 
{
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	display: flex;
	height: var(--nav-height);
	width: 100%;
	align-items: center;
	background: var(--surface-tonal-a0);
	box-shadow: var(--shadow);
	border-bottom: 1px solid var(--border-color);

	burger 
	{
		display: none;
		cursor: pointer;
		font-size: 1.8rem;
		padding: 0.2rem;

		transition: var(--transition-base);

		&.open
		{
			transform: rotate(90deg);
		}
	}

	brand
	{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: var(--spacing-base);

		a
		{
			color: inherit;
			
			&:hover
			{
				color: inherit;
			}
		}

		img
		{
			height: 2rem; 
		}

		div
		{
			font-weight: bold;
			padding: var(--spacing-base-half);
		}
	}

	menu
	{
		display: flex;
		flex-direction: row;
		flex-grow: 1;
		column-gap: var(--spacing-base);
		align-items: center;
		padding-right: var(--spacing-base-half);

		a
		{
			display: block;
			color: inherit;
			align-items: inherit;

			i
			{
				font-size: 1.5rem;
			}
		}

		filler
		{
			margin-inline-start: auto;
			height: 0px;
		} 

	} /* end media */

	@media screen and (max-width: 800px) 
	{
		burger 
		{
			display: block;
		}

		brand
		{
			margin-inline-start: auto;
			margin-inline-end: auto;
		}

		menu 
		{
			position: fixed;
			top: var(--nav-height);
			left: 0;
			width: 100%;
			display: initial;
			background: inherit;
			text-align: initial;

			/*duplicated from collapse.css because mixing navbar and collapse css doesnt seem to work quite right*/
			max-height: 0;
			overflow: hidden;
			transition: var(--transition-base);

			a, button
			{
				margin: var(--spacing-base-half);
			}
		}
	} /* end nav mobile settings */
} /* end nav */
switch 
{
	margin-bottom: var(--spacing-base);
	display: flex;
	flex-direction: row;
	align-items: center;
	min-width: max-content;

	--switch-height: 1.5rem;
	--switch-on-color: var(--info);
	--switch-off-color: var(--card-bg-light);
	--switch-disabled-color: var(--card-bg);
	--toggle-color: var(--body-color);

	--toggle-gap: calc(var(--switch-height) * 0.11);
	--toggle-circumference: calc(var(--switch-height) - (2 * var(--toggle-gap)));

	 /* The switch - the box around the slider */
	label.switch
	{
		margin-bottom: 0;
		position: relative;
		display: inline-block;
		width: calc(var(--switch-height) + var(--toggle-circumference));
		height: var(--switch-height);
	}

	label:not(.switch)
	{
		margin-bottom: 0;
		display: inline-block;
		cursor: pointer;
		&:not(:empty)
		{
			margin-left: var(--spacing-base-half);
			margin-right: var(--spacing-base-half);
		}
	}

	&[disabled] label:not(.switch)
	{
		cursor: not-allowed;
	}

	/* Hide default HTML checkbox */
	input {
		opacity: 0;
		width: 0;
		height: 0;
	}

	slider {
		position: absolute;
		cursor: pointer;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: var(--switch-off-color);
		-webkit-transition: var(--transition-base);
		transition: var(--transition-base);

		border-radius: var(--switch-height);
	}


	slider:before {
		position: absolute;
		content: "";
		height: var(--toggle-circumference);
		width: var(--toggle-circumference);
		left: var(--toggle-gap);
		bottom: var(--toggle-gap);
		background: var(--toggle-color);
		-webkit-transition: var(--transition-base);
		transition: var(--transition-base);

		border-radius: 50%;
	}

	input:checked + slider {
		background-color: var(--switch-on-color);
	}

	input:focus + slider {
		box-shadow: 0 0 1px var(--switch-on-color);
	}

	input:checked + slider:before {
		-webkit-transform: translateX(var(--toggle-circumference));
		-ms-transform: translateX(var(--toggle-circumference));
		transform: translateX(var(--toggle-circumference));
	}

	input:disabled + slider {
		background: var(--switch-disabled-color);
	}

	input:disabled + slider:before {
		background: var(--switch-off-color);
	}


	input:disabled + slider {
		cursor: not-allowed;
	}
}
filter-tag-container
{
	[categoryID]
	{
		display: flex;
		flex-direction: row-reverse;
		flex-wrap: wrap;
		gap: 0.2rem;
		margin-top: 0.2rem;
	}
}

filter-tag, 
[extends="item-tag"] /* without this the same selector on the parent overrides this style*/
{
	cursor: pointer;
	background: black;
	border: none;
	color: var(--surface-tonal-a20);

	&.active-filter
	{
		background: var(--primary-a0);
		color: var(--body-color);
	}
}