@define imageheight: 121px;

.item-tile
{
	width: 192px;
	height: 218px;
	padding: 0px 13px;

	transition-property: width;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.item-tile:disabled
{
	brightness: .5;
	opacity:.75;
}

.item-tile--small
{
	ui-scale: 90%;
}

.item-tile--large
{
	width: 312px;
	height: 330px;
}

.item-tile.delete
{
	width: 0px;

	transition-property: width;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.item-tile-in-same-set
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( rgba(223, 223, 223, 0.1), to(rgba(175, 175, 175, .0) ) );
}

.item-tile__name
{
	font-size: 16px;
	text-align: left;
	vertical-align: top;
	position: 0px imageheight 0px;
	margin-top: 8px;
	height: 78px;
	text-shadow:1px 1px 4px #000000;
	font-family: stratum2Font;
	color: white;

	transition-property: color;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.item-tile:hover:not(.item-tile:disabled) Label
{
	color: white;
}

.item-tile__image
{
	horizontal-align: middle;
	width: 100%;
	height: imageheight;
	opacity: 1;
	visibility: visible;
	padding-left: 6px;
}

.item-tile__bg
{	
	width: 100%;
	height: imageheight;
	border: 1px solid rgba(0, 0, 0, 0.25);

	background-color: gradient( linear, 0% 0%, 0% 100%, from( rgba(75, 75, 75, 0.75), to(rgba(175, 175, 175, .75) ) );
	box-shadow: rgba(0, 0, 0, 0.25) -2px -2px 4px 4px;

	transition-property: box-shadow, border, background-color;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.item-tile__team
{
	width:height-percentage( 120%);
	height: 40%;
	vertical-align:top;
	horizontal-align:left;
	position: 5% 5% 0px;
	padding-left: 6px;
	opacity: 0.2;
}

.item-tile:hover:not(.item-tile:disabled) .item-tile__bg
{
	box-shadow: rgba(0, 0, 0, 0.75) -2px -2px 8px 4px;

	transition-property: box-shadow, border, background-color;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
	sound: "UIPanorama.inventory_item_rollover";
}

#ItemListForCapability .item-tile:hover:not(.item-tile:disabled) .item-tile__bg
{
	border: 4px solid white;

	transition-property: box-shadow, border, background-color;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

#ItemListForCapability .item-tile:hover:not(.item-tile:disabled) .item-tile__rarity
{
	opacity: 0;

	transition-property: opacity;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.item-tile__multi-select
{
	visibility: collapse;
	opacity: 0;
	y: 40px;
	horizontal-align: center;
	background-color: rgba(252, 252, 252, 0.61);
	padding: 8px;
	border-radius: 50%;

	transition-property: opacity;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.item-tile__multi-select Image
{
	wash-color: rgb(31, 31, 31);
}

.item-tile.capability_multistatus_selected .item-tile__multi-select
{
	visibility: visible;
	opacity: 1;
}

.item-tile.capability_multistatus_selected .item-tile__bg,
.item-tile.capability_multistatus_selected .item-tile__image
{
	brightness: .3;
}

.item-tile__rarity
{
	background-color: #FFFFFF;
	box-shadow: rgba(65, 65, 65, .25) -2px -2px 4px 4px;
	width: 6px;
	height: imageheight;
	vertical-align: top;

	transition-property: opacity;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.item-tile__recent
{
	background-color: blueColor;
	horizontal-align: left;
	vertical-align: top;
	font-size: 12px;
	padding: 4px;
	margin: 0px 8px 8px 0px;
	font-weight: bold;

	text-align: center;
	box-shadow: #00000025 -2px -2px 2px 4px;
	visibility:visible;
}

.item-tile__equipped
{
	flow-children: right;
	width: fit-children;
	height: fit-children;
	vertical-align: top;
	horizontal-align: right;
	margin-top: 6px;
	visibility: visible;
}

.item-tile__equipped__radiodot
{
	width: 16px;
	height: 16px;
	position: 0px 0px 0px;
	vertical-align: center;
	background-color: gradient( radial, 50% 50%, 0% 0%, 0% 0%, from( #ffffff00  ), color-stop( 0.8, #ffffff00  ), to( #ffffff00 ) );
	border-radius: 50%;
	z-index: 1;
	margin-right: 6px;
	border: 1px solid white;
	box-shadow: #00000025 -2px -2px 2px 4px;
	-s2-mix-blend-mode: screen;

	transition-property: background-color, width, height;
	transition-duration: 0.5s;
	transition-timing-function: ease-in-out;
}

.item-tile__equipped__radiodot--filled
{
	background-color: gradient( radial, 50% 50%, 0% 0%, 25% 25%, from( white ), color-stop( .95, white ), to( #ffffff00 ) );

	transition-property: background-color;
	transition-duration: 0.5s;
	transition-timing-function: ease-in-out;
}

.item-tile__equipped__radiodot--filled.shuffle
{
    background-image: url("file://{images}/icons/ui/random.svg");
    background-img-opacity: 1;
    background-size: 10px 10px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
	background-color: None;
}

.item-tile__equipped__radiodot--t
{
	wash-color: warningColor;
}

.item-tile__equipped__radiodot--ct
{
	wash-color: blueColor;
}

.item-tile__equipped__radiodot.hidden,
.item-tile__recent.hidden,
{
	visibility: collapse;
}

.item-tile__stickers
{
	height: fit-children;
	width: fit-children;
	flow-children: left;
	position: 0px imageheight 0px;
	margin-top: -28px;
	margin-left: 4px;
}

.item-tile__stickers__image
{
	height: 24px;
}

.item-tile__model-panel
{
	horizontal-align: middle;
	margin-top: 4%;
	width: 85%;
	height: 85%;
	opacity: 1;
	visibility: collapse;

	transition-property: opacity;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}


.ItemTile #ItemTooltip 
{
	width: 100%;
	height: 100%;
}

.Active
{
	opacity: 1;
	visibility: visible;
}

.ItemTile-ModelPanel-Inspect
{
	horizontal-align: middle;
	margin-top: 4%;
	width: 768px;
	height: 512px;
	
}
