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

$health-team-name-size: 30px;
$health-team-name-min-height: 30px;
$health-vitals-number-size: 40px;
$health-vitals-state-size: 22px;

@keyframes team-reveal
{
	0% { opacity: 0; transform: translateY( 20px ) scale( 0.90 ); }
	70% { opacity: 1; transform: translateY( 0px ) scale( 1.01 ); }
	100% { opacity: 1; transform: translateY( 0 ) scale( 1 ); }
}

@keyframes health-danger-pulse
{
	0% { box-shadow: 0 0 0 rgba( #8e1111, 0.0 ); transform: scale( 1 ); }
	50% { box-shadow: 0 0 26px rgba( #8e1111, 0.42 ); transform: scale( 1.005 ); }
	100% { box-shadow: 0 0 0 rgba( #8e1111, 0.0 ); transform: scale( 1 ); }
}

@keyframes health-bar-flicker
{
	0% { opacity: 0.85; box-shadow: 0 0 4px rgba( #ff5050, 0.25 ); }
	50% { opacity: 1; box-shadow: 0 0 10px rgba( #ff5050, 0.65 ); }
	100% { opacity: 0.85; box-shadow: 0 0 4px rgba( #ff5050, 0.25 ); }
}

@keyframes badly-wounded-pulse
{
	0% { transform: scale( 1 ); opacity: 1; }
	50% { transform: scale( 1.025 ); opacity: 0.74; }
	100% { transform: scale( 1 ); opacity: 1; }
}

@keyframes badly-wounded-bar-pulse
{
	0% { opacity: 1; }
	50% { opacity: 0.72; }
	100% { opacity: 1; }
}

@keyframes blood-bubble-fall
{
	0% { opacity: 0.7; transform: translateY( -24px ) scale( 0.85 ); }
	15% { opacity: 0.7; transform: translateY( -20px ) scale( 0.88 ); }
	50% { opacity: 0.4; transform: translateY( 30px ) scale( 0.7 ); }
	85% { opacity: 0.1; transform: translateY( 70px ) scale( 0.5 ); }
	100% { opacity: 0; transform: translateY( 82px ) scale( 0.45 ); }
}
// 35% { opacity: 0.7; transform: translateY( -24px ) scale( 0.85 ); width: 8px; }
// 56% { opacity: 0.5; transform: translateY( 4px ) scale( 0.92 ); width: 12px; }
// 72% { opacity: 0.2; transform: translateY( 50px ) scale( 0.96 ); width: 14px; }
// 82% { opacity: 0.1; transform: translateY( 60px ) scale( 0.8 ); width: 12px; }
// 92% { opacity: 0.05; transform: translateY( 70px ) scale( 0.96 ); width: 14px; }

@keyframes critical-status-flicker
{
	0% { opacity: 1; transform: scale( 1 ); }
	30% { opacity: 0.82; }
	60% { opacity: 0.9; transform: scale( 1.02 ); }
	100% { opacity: 1; transform: scale( 1 ); }
}



@keyframes armor-hit-pulse
{
	0% { transform: scale( 1 ); }
	40% { transform: scale( 1.12 ) rotate( -5deg ); }
	100% { transform: scale( 1 ); }
}

@keyframes armor-hit-glimmer
{
	0% { filter: drop-shadow( 0 1px 2px rgba( 0, 0, 0, 0.45 ) ); }
	35% { filter: drop-shadow( 0 0 12px rgba( 165, 220, 255, 0.82 ) ); }
	100% { filter: drop-shadow( 0 1px 2px rgba( 0, 0, 0, 0.45 ) ); }
}
Health {
    text-transform: uppercase;
    position: absolute;
    left: $safe-zone-x;
    bottom: $safe-zone-y;
    align-items: center;
    justify-content: center;

	.HealthBox {
		overflow: hidden;
		position: relative;
		align-items: center;
		flex-direction: column;
		background-color: $widget-color-dark;
		backdrop-filter: $widget-backdrop-filter;
		//border: 1px solid rgba( black, 0.45 );
		transition: box-shadow 120ms ease, transform 120ms ease;

		.Segment,
		.Vitals,
		.HealthDisplay {
			z-index: 4;
		}

		.TeamName {
			left: 8px;
			padding-left: 12px;
			padding-right: 12px;
			padding-top: 4px;
			padding-bottom: 4px;
			min-height: $health-team-name-min-height;
			align-items: center;
			//justify-content: center;
			opacity: 1;
			transform: translateY( 0 );
			animation: team-reveal 0.45s ease-out;

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

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

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

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

			> label.PunchText {
				border-radius: 8px;
				color: rgba($white, 0.9);
				font-size: $health-team-name-size;
				font-family: $font-family-heading;
				font-weight: $font-weight-heavy;
				letter-spacing: 1px;
			}
		}

		.HealthArea {
			position: relative;
			width: 100%;
			align-items: center;
			flex-direction: column;
		}

		.Vitals {
			height: 58px;
			align-items: center;
			justify-content: center;

			.Text {
				right: 10px;
				position: absolute;
				font-size: $health-vitals-number-size;
				font-family: $font-family-heading;
				font-weight: $font-weight-heavy;
			}

			.State {
				left: 10px;
				font-size: $health-vitals-state-size;
				position: absolute;
				letter-spacing: 1px;
			}
		}

		.HealthDisplay {
			padding: 0px;
			align-items: center;

			.HealthBar {
				flex-direction: row;
				overflow: hidden;
				border-top: 1px solid rgba( black, 0.30 );

				.Bar1 {
					height: 12px;
					background-color: #2DCC2F;
				}

				.Bar2 {
					height: 12px;
					background-color: rgba( black, 0.35 );
				}
			}
		}

		.BloodFx {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			z-index: 0;
			opacity: 0;
			transition: opacity 180ms ease;
           

			.BloodBase {
				position: absolute;
				left: -16px;
				right: -16px;
				top: -34px;
				height: 98px;
				border-bottom-left-radius: 34px;
				border-bottom-right-radius: 34px;
				background-image: linear-gradient( rgba( #8c1010, 0.6 ), rgba( #300202, 0.0 ) );
				opacity: 0.82;
			}

			.Bubble {
				position: absolute;
				top: -6px;
				width: 16px;
				height: 8px;
				border-radius: 999px;
				background-color: rgba( #b51515, 0.2 );
				box-shadow: 0 4px 10px rgba( #3b0707, 0.42 );
				opacity: 0;
			}

			.b1 { left: 20px; animation-delay: 0.00s; }
			.b2 { left: 68px; animation-delay: 1.32s; width: 12px; height: 12px; }
			.b3 { left: 126px; animation-delay: 2.85s; width: 20px; height: 20px; }
			.b4 { left: 202px; animation-delay: 5.45s; width: 14px; height: 14px; }
			.b5 { left: 262px; animation-delay: 4.05s; width: 18px; height: 18px; }
            .b6 { left: 82px; animation-delay: 3.05s; width: 24px; height: 16px; }
            .b7 { left: 300px; animation-delay: 2.05s; width: 8px; height: 10px; }
            .b8 { left: 37px; animation-delay: 6.55s; width: 16px; height: 12px; }
            // .b9 { left: 170px; animation-delay: 7.05s; width: 18px; height: 18px; }
		}

		&.low-health {
			animation: health-danger-pulse 1.55s ease-in-out infinite;

			.BloodFx {
				opacity: 1;
			}

			.BloodFx .Bubble {
				opacity: 1;
				animation: blood-bubble-fall 4.65s ease-out infinite;
			}

			.HealthBar .Bar1 {
				animation: health-bar-flicker 1.55s linear infinite;
			}
		}

		&.badly-wounded {
			.Vitals .State,
			.Vitals .Text {
				animation: badly-wounded-pulse 1.55s ease-in-out infinite;
			}

			.HealthBar .Bar1 {
				animation: badly-wounded-bar-pulse 1.55s ease-in-out infinite;
			}
		}

		&.critical-health {
			animation-duration: 1.55s;

			.Vitals .State {
				animation: critical-status-flicker 1.55s linear infinite;
			}

			.Vitals .State,
			.Vitals .Text {
				color: #050505;
			}

			.BloodFx .BloodBase {
				opacity: 1;
			}

			.BloodFx .Bubble {
                animation: blood-bubble-fall 4.65s ease-out infinite;
				animation-duration: 4.65s;
			}
		}

		.Segment {
			align-items: center;
			min-width: 340px;
		}

		.PerkRow {
			width: 100%;
			padding: 8px 8px 2px;
			gap: 6px;
			align-items: center;
			justify-content: center;
			z-index: 4;
		}

		.PerkChip {
			width: 30px;
			height: 30px;
			border-radius: 6px;
			align-items: center;
			justify-content: center;
			border: 1px solid rgba( 255, 255, 255, 0.08 );
			background-image: linear-gradient( 180deg, rgba( 255, 255, 255, 0.16 ), rgba( 255, 255, 255, 0.04 ) 30%, rgba( 0, 0, 0, 0.28 ) 100% );
			box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.24 );
		}

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

		.PerkRow.perk-traitor .PerkChip {
			border-color: rgba( $traitor-red, 0.26 );
			background-image: linear-gradient( 180deg, rgba( 255, 255, 255, 0.16 ), rgba( $traitor-red, 0.22 ) 28%, rgba( 20, 10, 12, 0.92 ) 100% );
		}

		.PerkRow.perk-detective .PerkChip {
			border-color: rgba( 47, 79, 115, 0.26 );
			background-image: linear-gradient( 180deg, rgba( 255, 255, 255, 0.16 ), rgba( 47, 79, 115, 0.22 ) 28%, rgba( 10, 16, 24, 0.92 ) 100% );
		}

		.PerkRow.perk-neutral .PerkChip {
			border-color: rgba( 255, 255, 255, 0.14 );
			background-image: linear-gradient( 180deg, rgba( 255, 255, 255, 0.14 ), rgba( 255, 255, 255, 0.05 ) 28%, rgba( 10, 12, 16, 0.9 ) 100% );
		}
	}

	.HealthCluster {
		flex-direction: row;
		align-items: stretch;
		gap: 8px;
	}

	.HealthBox {
		align-items: stretch;
	}

	.HealthBox .Vitals .Readout {
		position: absolute;
		right: 10px;
		align-items: center;
		gap: 8px;
	}

	.HealthBox .Vitals .Text {
		position: relative;
		right: auto;
	}

	.HealthBox .ArmorStatus {
		width: 40px;
		height: 64px;
		align-items: center;
		justify-content: center;
	}

	.HealthBox .ArmorStatusIcon {
		width: 64px;
		height: 64px;
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		filter: drop-shadow( 0 1px 2px rgba( 0, 0, 0, 0.45 ) );
	}

	.HealthBox .ArmorStatus.armor-hit {
		animation: armor-hit-pulse 0.42s ease-out;
	}

	.HealthBox .ArmorStatus.armor-hit .ArmorStatusIcon {
		animation: armor-hit-glimmer 0.42s ease-out;
	}

	.PerkGrid {
		width: 96px;
		min-width: 96px;
		padding: 0px;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 4px;
		align-content: flex-start;
	}

	.PerkCell {
		width: 48px;
		height: 48px;
		border-radius: 4px;
		align-items: center;
		justify-content: center;
		border: 2px solid rgba( 255, 255, 255, 0.08 );
		border-top-color: rgba( 255, 255, 255, 0.18 );
		border-left-color: rgba( 255, 255, 255, 0.12 );
		border-right-color: rgba( 0, 0, 0, 0.18 );
		border-bottom-color: rgba( 0, 0, 0, 0.28 );
		background-color: rgba( 16, 18, 24, 0.92 );
		//background-image: linear-gradient( 180deg, rgba( 255, 255, 255, 0.22 ) 0%, rgba( 255, 255, 255, 0.08 ) 18%, rgba( 255, 255, 255, 0.02 ) 34%, rgba( 0, 0, 0, 0.08 ) 62%, rgba( 0, 0, 0, 0.3 ) 100% );
		box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.24 );
	}

	.PerkGrid .PerkIcon {
		width: 36px;
		height: 36px;
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
	}

	.PerkGrid.perk-traitor .PerkCell {
		background-color: $team-ui-bg-traitor;
		// border-top-color: rgba( 255, 255, 255, 0.16 );
		// border-left-color: rgba( $traitor-red, 0.22 );
		// border-right-color: rgba( 33, 12, 17, 0.46 );
		// border-bottom-color: rgba( 12, 6, 8, 0.62 );
		//border-color: rgba( 20, 10, 12, 0.92 );
		//background-image: linear-gradient( 180deg, rgba( 255, 255, 255, 0.2 ) 0%, rgba( $traitor-red, 0.34 ) 16%, rgba( $traitor-red, 0.18 ) 38%, rgba( 18, 9, 11, 0.14 ) 66%, rgba( 12, 6, 8, 0.38 ) 100% );
	}

	.PerkGrid.perk-detective .PerkCell {
		background-color: $team-ui-bg-detective;
		// border-top-color: rgba( 255, 255, 255, 0.16 );
		// border-left-color: rgba( $team-ui-crosshair-detective, 0.22 );
		// border-right-color: rgba( 10, 26, 38, 0.46 );
		// border-bottom-color: rgba( 7, 12, 18, 0.62 );
		//border-color: rgba( 10, 16, 24, 0.92 );
		//background-image: linear-gradient( 180deg, rgba( 255, 255, 255, 0.2 ) 0%, rgba( $team-ui-crosshair-detective, 0.34 ) 16%, rgba( $team-ui-crosshair-detective, 0.18 ) 38%, rgba( 9, 16, 24, 0.12 ) 66%, rgba( 7, 12, 18, 0.38 ) 100% );
	}

	.PerkGrid.perk-neutral .PerkCell {
		border-color: rgba( 255, 255, 255, 0.14 );
		border-top-color: rgba( 255, 255, 255, 0.16 );
		border-left-color: rgba( 255, 255, 255, 0.12 );
		border-right-color: rgba( 0, 0, 0, 0.2 );
		border-bottom-color: rgba( 0, 0, 0, 0.3 );
		background-color: rgba( 10, 12, 16, 0.9 );
		background-image: linear-gradient( 180deg, rgba( 255, 255, 255, 0.2 ) 0%, rgba( 255, 255, 255, 0.08 ) 18%, rgba( 255, 255, 255, 0.03 ) 34%, rgba( 0, 0, 0, 0.08 ) 62%, rgba( 0, 0, 0, 0.32 ) 100% );
	}
}