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

StatusBar {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	width: 100%;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	z-index: 20;

	.TransitionBackdrop,
	.TransitionDetail {
		display: none;
	}

	.StateBox {
		 @include menu-surface-glass(
            $border-color: rgba( 255, 255, 255, 0 ),
            $background-color: rgba( 0, 0, 0, 0.55 ),
            $radius: 6px,
            $padding: 0px 0px,
            $backdrop: blur( 18px )
        );

		position: relative;
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
		border-top: 0;
		overflow: hidden;
		align-items: center;
		flex-direction: column;
		background-color: $widget-color;
		backdrop-filter: $widget-backdrop-filter;
		transition: transform $motion-normal, opacity $motion-normal, background-color $motion-normal;
		box-shadow: 0px 16px 48px rgba( 0, 0, 0, 0.35 );
	}

	.StateName {
		width: 100%;
		background-color: rgba( 4, 7, 10, 0.16 );

		label {
			font-size: 20px;
			letter-spacing: 0.6px;
			text-shadow: 0px 2px 2px rgba( 0, 0, 0, 0.75 );
		}
	}

	.Time {
		width: 100%;
		label {
			letter-spacing: 0.6px;
			text-shadow: 0px 2px 2px rgba( 0, 0, 0, 0.75 );
		}
	}

	.Segment {
		padding: 6px 14px;
		align-items: center;
		justify-content: center;
		min-width: 300px;
	}

	&.fullscreen-transition {
		top: 0px;
		bottom: 0px;
		padding: 72px 48px;
		z-index: 45;

		.TransitionBackdrop {
			display: flex;
			position: absolute;
			top: 0px;
			left: 0px;
			right: 0px;
			bottom: 0px;
			background-color: rgba( 4, 7, 10, 0.16 );
			backdrop-filter: blur( 8px );
		}

		.StateBox {
			@include menu-surface-glass(
				$border-color: rgba( 255, 255, 255, 0.16 ),
				$background-color: rgba( 0, 0, 0, 0.32 ),
				$radius: 18px,
				$padding: 20px 24px,
				$backdrop: blur( 18px )
			);
			width: 100%;
			max-width: 680px;
			gap: 10px;
			box-shadow: 0px 32px 96px rgba( 0, 0, 0, 0.45 );
			transform: translateY( -24px );
		}

		.TransitionDetail {
			display: flex;
			max-width: 520px;
			text-align: center;
			@include menu-copy( $size: 16px, $color: rgba( 255, 255, 255, 0.74 ), $tracking: 0.3px );
		}

		.StateName {
			background-color: rgba( 255, 255, 255, 0.05 );
			border: 1px solid rgba( 255, 255, 255, 0.12 );
			border-radius: 12px;

			label {
				font-family: "Resmont-SemiBold", "Resmont-Medium", "Resmont";
				font-size: 28px;
				//font-weight: 500;
				text-transform: uppercase;
				letter-spacing: 0.55px;
				text-shadow: none;
			}
		}

		.Time {
			border-radius: 12px;
			background-color: rgba( 255, 255, 255, 0.03 );
			font-family: "Resmont-Regular", "Resmont", "Dinish";
			font-size: 42px;
			font-weight: 600;
			letter-spacing: 0.7px;
			text-shadow: none;
		}

		.Segment {
			width: 100%;
			min-width: 0px;
			padding: 14px 22px;
		}
	}

	&.recovery-transition {
		.StateName label {
			color: $warning-orange;
		}
		.Time {
			color: $warning-orange;
		}
		.TransitionDetail {
			color: $warning-orange;
		}
	}
}