@import "/UI/Core/Styles/Theme.scss";

BodyInfo {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	z-index: 140;

	root {
		width: 100%;
		height: 100%;
		align-items: center;
		justify-content: center;
		pointer-events: none;

		&.ui-input-active {
			pointer-events: none;
		}
	}

	.InspectBackdrop {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		pointer-events: all;
		z-index: 1;
		background-color: transparent;
	}

	.BodyInfoBox {
		flex-shrink: 0;
		pointer-events: none;
		margin-top: 128px;
		width: 468px;
		min-width: 468px;
		max-width: 468px;
		overflow: hidden;
		flex-direction: column;
		background-color: $widget-color-dark;
		backdrop-filter: $widget-backdrop-filter;
		border-radius: 4px;
		//border: 2px solid rgba( 255, 255, 255, 0.06 );
		box-shadow: 0 8px 22px rgba( 0, 0, 0, 0.35 );
		transition: transform 0.22s, opacity 0.22s;

		&.Active {
			pointer-events: all;
			z-index: 2;
		}

		.Content {
			width: 100%;
			flex-direction: column;
		}

		&.Collapsed {
			transform: translateY( 6px );
		}

		&.Expanded {
			transform: translateY( 0px );
		}

		.Name {
			width: 100%;
			height: 40px;
			padding: 10px 12px;
			gap: 10px;
			align-items: center;
			justify-content: space-between;
			background-color: $widget-color;
			transition: background-color 0.275s;

			&.Active.team-bg-unassigned {
				background-color: $team-ui-bg-unassigned;
			}

			&.Active.team-bg-innocent {
				background-color: $team-ui-bg-innocent;
			}

			&.Active.team-bg-traitor {
				background-color: $team-ui-bg-traitor;
			}

			&.Active.team-bg-detective {
				background-color: $team-ui-bg-detective;
			}
		}

		.NameText {
			flex-grow: 1;
			min-width: 0;
			font-size: 18px;
			font-weight: 900;
		}

		.RoleChip {
			min-width: 104px;
			height: 34px;
			min-height: 34px;
			padding: 0 12px;
			flex-shrink: 0;
			align-items: center;
			justify-content: center;
			border-radius: 4px;
			border: 2px solid rgba( 255, 255, 255, 0.12 );
			box-shadow: 0 3px 10px rgba( 0, 0, 0, 0.22 );
		}

		.RoleChipText {
			font-size: 16px;
			font-weight: 900;
			letter-spacing: 0.9px;
			text-transform: uppercase;
			white-space: nowrap;
			color: white;
		}

		.RoleChipPlaceholder {
			opacity: 0;
			border-color: transparent;
			background-color: transparent;
			box-shadow: none;
			pointer-events: none;
		}

		.PanelCloseButton {
			width: 34px;
			height: 34px;
			min-width: 34px;
			min-height: 34px;
			flex-shrink: 0;
			align-items: center;
			justify-content: center;
			border-radius: 4px;
			background-color: rgba( 0, 0, 0, 0.28 );
			border: 2px solid rgba( 255, 255, 255, 0.12 );
			box-shadow: 0 3px 10px rgba( 0, 0, 0, 0.22 );
			opacity: 0.92;
			pointer-events: all;
			transition: background-color 0.15s, opacity 0.15s;

			&:hover {
				background-color: rgba( 0, 0, 0, 0.46 );
				opacity: 1;
			}
		}

		.PanelCloseIcon {
			font-size: 19px;
			font-weight: 900;
			text-align: center;
			color: rgb(236, 178, 51);
		}

		.Tooltip {
			padding: 2px 8px 5px 6px;
			flex-direction: column;
			gap: 1px;
		}

		.TooltipText,
		.TooltipCredit {
			font-size: 10px;
			line-height: 14px;
			white-space: nowrap;
		}

		.TooltipCredit {
			font-weight: 900;
			color: #f0d24b;
		}

		.Info {
			padding: 10px 10px 4px 10px;
			max-width: 420px;
			max-height: 500px;
			//overflow: hidden;
			white-space: normal;
			//text-overflow: ellipsis;
			transition: opacity 0.22s, transform 0.22s;

			&.hidden {
				opacity: 0;
				transform: translateY( 10px );
				max-height: 0;
				overflow: hidden;
				padding: 0;
				margin: 0;
				pointer-events: none;
			}

			&:intro {
				opacity: 0;
				transform: translateY( 10px );
			}
		}

		.DeathText {
			width: 100%;
			font-size: 16px;
		}

		.Evidence {
			width: 100%;
			padding: 0 10px 10px 10px;
			gap: 6px;
			flex-direction: column;
			transition: opacity 0.22s, transform 0.22s;

			&.hidden {
				opacity: 0;
				transform: translateY( 10px );
				max-height: 0;
				overflow: hidden;
				padding: 0;
				margin: 0;
				pointer-events: none;
			}

			&:intro {
				opacity: 0;
				transform: translateY( 10px );
			}
		}

		.EvidenceRow {
			gap: 10px;
			padding: 8px 10px;
			align-items: flex-start;
			border-radius: 16px;
			background-color: rgba( 255, 255, 255, 0.05 );
		}

		.EvidenceLabel {
			width: 100px;
			flex-shrink: 0;
			padding-top: 2px;
			font-size: 11px;
			font-weight: 900;
			letter-spacing: 1px;
			text-transform: uppercase;
			white-space: nowrap;
			opacity: 0.62;
		}

		.EvidenceValue {
			flex: 1;
			min-width: 0;
		}

		.EvidenceText {
			width: 100%;
			white-space: normal;
			text-overflow: clip;
		}

		.Squircles {
			width: 100%;
			padding: 2px 10px 10px 10px;
			gap: 10px;
			align-items: flex-start;
			justify-content: center;
			transition: opacity 0.22s, transform 0.22s;

			&.hidden {
				opacity: 0;
				transform: translateY( 10px );
				max-height: 0;
				overflow: hidden;
				padding: 0;
				margin: 0;
				pointer-events: none;
			}

			&:intro {
				opacity: 0;
				transform: translateY( 10px );
			}
		}

		.SummaryColumn {
			min-width: 0;
			gap: 6px;
			flex-direction: column;
			align-items: stretch;
		}

		.IdentityColumn,
		.DnaColumn {
			width: 128px;
			flex-shrink: 0;
		}

		.MethodColumn {
			width: 132px;
			flex-shrink: 0;
		}

		.SummaryHeading {
			//padding-left: 0px;
			font-size: 12px;
			font-weight: 900;
			letter-spacing: 1px;
			text-transform: uppercase;
			opacity: 0.72;
			justify-content: center;
		}

		.SummaryTile {
			width: 100%;
			min-height: 132px;
			max-height: 132px;
			padding: 8px;
			gap: 6px;
			flex-direction: column;
			align-items: stretch;
			justify-content: flex-start;
			border-radius: 4px;
			background-color: rgba( 24, 24, 24, 0.92 );
			border: 2px solid rgba( 255, 255, 255, 0.05 );
			box-shadow: 0 6px 16px rgba( 0, 0, 0, 0.24 );
		}

		.MethodTile {
			min-height: 132px;
			max-height: 132px;
			padding: 0;
			border-radius: 4px;
			border: 2px solid rgba( 132, 165, 199, 0.45 );
			background-color: rgba( 24, 24, 24, 0.92 );
		}

		.TileVisual {
			flex: 1;
			min-height: 0;
			align-items: center;
			justify-content: center;
			border-radius: 4px;
			background-color: rgba( 255, 255, 255, 0.035 );
			overflow: hidden;
		}

		.TileValue {
			width: 100%;
			font-size: 14px;
			font-weight: 800;
			text-align: center;
			white-space: normal;
			text-overflow: clip;
		}

		.AvatarVisual {
			height: 100%;
			padding: 0px;
		}

		.TileAvatarImage {
			// width: 84px;
			// height: 84px;
			border-radius: 4px;
			background-color: rgba( 255, 255, 255, 0.04 );
			object-fit: cover;
		}

		.WeaponVisual {
			width: 100%;
			height: 100%;
			padding: 0;
			border-radius: 2px;
			background-color: transparent;

			ItemPreviewImage {
				width: 100%;
				height: 100%;
			}
		}

		.TileWeaponIcon {
			width: 72px;
			height: 72px;
			background-position: center;
			background-repeat: no-repeat;
			background-size: contain;
		}

		.TileFallbackText {
			padding: 10px;
			text-align: center;
			font-size: 14px;
			font-weight: 800;
		}

		.SummaryInfo {
			padding-top: 0;
			padding-bottom: 10px;
		}

		.DnaTile {
			padding: 0;
			background-color: rgba( 24, 24, 24, 0.92 );
		}

		.DnaTileValue {
			position: relative;
			width: auto;
			max-width: 100%;
			padding: 0 0px;
			font-size: 26px;
			font-weight: 700;
			letter-spacing: 1px;
			text-align: center;
			color: #ffea4d;
			outline: rgba(0,0,0,1);;
			filter: drop-shadow( 0 4px 4px rgba( 0, 0, 0, 1 ) );
			

			text {
				text-align: center;
				color: #ffea4d;
				box-shadow: 0 3px 10px rgba( 0, 0, 0, 0.22 );
			}
		}

		.DnaTileVisual {
			position: relative;
			width: 100%;
			height: 100%;
			padding: 0;
			align-items: center;
			justify-content: center;
			background-color: transparent;
			overflow: hidden;

			.DnaStateIcon {
				position: absolute;
				top: 4px;
				right: 4px;
				bottom: 4px;
				left: 4px;
				background-position: center;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				transition: opacity 0.18s, transform 0.18s, filter 0.18s;
			}

			.DnaTileOverlay {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				padding: 8px;
				align-items: center;
				justify-content: center;
				z-index: 2;
			}

			.DnaStateIcon.dna-active {
				opacity: 1;
				filter: drop-shadow( 0 0 10px rgba( 97, 231, 255, 1 ) );
			}

			.DnaStateIcon.dna-inactive {
				opacity: 0.72;
				filter: drop-shadow( 0 1px 2px rgba( 0, 0, 0, 0.45 ) );
			}
		}

		.CallDetectiveButton {
			pointer-events: all;
			align-self: stretch;
			margin: 0 10px 10px 10px;
			justify-content: center;
			transition: opacity 0.22s, transform 0.22s;

			&.disabled {
				opacity: 0.4;
				pointer-events: none;
			}

			&.sent {
				background-color: rgba( 121, 195, 255, 0.25 );
				border-color: rgba( 121, 195, 255, 0.4 );
				pointer-events: none;
			}

			&.hidden {
				opacity: 0;
				transform: translateY( 10px );
				max-height: 0;
				overflow: hidden;
				padding: 0;
				margin: 0;
				pointer-events: none;
			}

			&:intro {
				opacity: 0;
				transform: translateY( 10px );
			}
		}
	}
}