/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
#components-reconnect-modal[b-3hu2zikc0d] {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1400;
	overflow: hidden;
	background-color: transparent;
	border: none;
	width: 100%;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	padding: 0;
}

#components-reconnect-modal[b-3hu2zikc0d]::backdrop {
	background: rgba(10, 16, 28, 0.5);
}

#components-reconnect-modal.components-reconnect-show[b-3hu2zikc0d],
#components-reconnect-modal[open][b-3hu2zikc0d],
#components-reconnect-modal.components-reconnect-failed[b-3hu2zikc0d],
#components-reconnect-modal.components-reconnect-repeated-attempt[b-3hu2zikc0d],
#components-reconnect-modal.components-reconnect-paused[b-3hu2zikc0d],
#components-reconnect-modal.components-reconnect-resume-failed[b-3hu2zikc0d],
#components-reconnect-modal.components-pause[b-3hu2zikc0d],
#components-reconnect-modal.components-resume-failed[b-3hu2zikc0d] {
	display: flex;
	align-items: center;
	justify-content: center;
}

.components-reconnect-backdrop[b-3hu2zikc0d] {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background:
		radial-gradient(
			90% 60% at 80% 0%,
			color-mix(in srgb, var(--mud-palette-primary, #594ae2) 12%, transparent),
			transparent 60%
		),
		radial-gradient(
			80% 55% at 0% 100%,
			color-mix(in srgb, var(--mud-palette-info, #2196f3) 16%, transparent),
			transparent 62%
		),
		rgba(8, 12, 20, 0.5);
}

.components-reconnect-surface[b-3hu2zikc0d] {
	width: min(480px, 100%);
	border-radius: var(--mud-default-borderradius, 12px);
	border: 1px solid
		color-mix(
			in srgb,
			var(--mud-palette-lines-default, #e0e0e0) 70%,
			transparent
		);
	background: var(--mud-palette-surface, #fff);
	box-shadow: var(--mud-elevation-24, 0 16px 30px rgba(0, 0, 0, 0.28));
	color: var(--mud-palette-text-primary, #1f2937);
	padding: 20px 20px 18px;
}

.components-reconnect-header[b-3hu2zikc0d] {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.components-reconnect-header h2[b-3hu2zikc0d] {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.3;
}

.components-reconnect-status-dot[b-3hu2zikc0d] {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--mud-palette-warning, #f59e0b);
	box-shadow: 0 0 0 6px
		color-mix(in srgb, var(--mud-palette-warning, #f59e0b) 25%, transparent);
}

.components-reconnect-supporting[b-3hu2zikc0d],
.components-reconnect-message[b-3hu2zikc0d] {
	margin: 0;
	line-height: 1.45;
	font-size: 0.95rem;
}

.components-reconnect-supporting[b-3hu2zikc0d] {
	color: var(--mud-palette-text-secondary, #52607a);
	margin-bottom: 14px;
}

.components-reconnect-message[b-3hu2zikc0d] {
	font-weight: 500;
}

.components-reconnect-danger[b-3hu2zikc0d] {
	color: var(--mud-palette-error, #b00020);
}

.components-reconnect-actions[b-3hu2zikc0d] {
	margin-top: 14px;
	display: flex;
	gap: 10px;
	justify-content: flex-end;
}

.components-reconnect-first-attempt-visible[b-3hu2zikc0d],
.components-reconnect-repeated-attempt-visible[b-3hu2zikc0d],
.components-reconnect-failed-visible[b-3hu2zikc0d],
.components-pause-visible[b-3hu2zikc0d],
.components-resume-failed-visible[b-3hu2zikc0d] {
	display: none;
}

/* Base loader and button styles before state-specific overrides */
.components-rejoin-loader[b-3hu2zikc0d] {
	display: none;
	margin-bottom: 10px;
	gap: 8px;
}

.components-rejoin-loader div[b-3hu2zikc0d] {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background-color: var(--mud-palette-primary, #594ae2);
	animation: reconnect-pulse-b-3hu2zikc0d 1.2s infinite ease-in-out both;
}

.components-rejoin-loader div:nth-child(1)[b-3hu2zikc0d] {
	animation-delay: -0.24s;
}

.components-rejoin-loader div:nth-child(2)[b-3hu2zikc0d] {
	animation-delay: -0.12s;
}

#components-reconnect-button[b-3hu2zikc0d],
#components-resume-button[b-3hu2zikc0d] {
	display: none;
	min-width: 92px;
	cursor: pointer;
	padding: 8px 16px;
	border: 1px solid transparent;
	border-radius: 999px;
	background-color: var(--mud-palette-primary, #594ae2);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	transition:
		filter 140ms ease,
		transform 140ms ease;
}

#components-reconnect-button:hover[b-3hu2zikc0d],
#components-resume-button:hover[b-3hu2zikc0d] {
	filter: brightness(0.95);
}

#components-reconnect-button:active[b-3hu2zikc0d],
#components-resume-button:active[b-3hu2zikc0d] {
	transform: translateY(1px);
}

/* State-specific overrides with higher specificity */
dialog[open].components-reconnect-show
.components-reconnect-first-attempt-visible[b-3hu2zikc0d] {
	display: block;
}

dialog[open].components-reconnect-show .components-rejoin-loader[b-3hu2zikc0d] {
	display: inline-flex;
}

dialog[open].components-reconnect-failed .components-reconnect-failed-visible[b-3hu2zikc0d] {
	display: block;
}

dialog[open].components-reconnect-failed #components-reconnect-button[b-3hu2zikc0d] {
	display: block;
}

dialog[open].components-reconnect-repeated-attempt
	.components-reconnect-repeated-attempt-visible[b-3hu2zikc0d] {
	display: block;
}

dialog[open].components-reconnect-repeated-attempt .components-rejoin-loader[b-3hu2zikc0d] {
	display: inline-flex;
}

dialog[open].components-reconnect-paused .components-pause-visible[b-3hu2zikc0d],
dialog[open].components-pause .components-pause-visible[b-3hu2zikc0d] {
	display: block;
}

dialog[open].components-reconnect-paused #components-resume-button[b-3hu2zikc0d],
dialog[open].components-pause #components-resume-button[b-3hu2zikc0d],
dialog[open].components-reconnect-resume-failed #components-resume-button[b-3hu2zikc0d],
dialog[open].components-resume-failed #components-resume-button[b-3hu2zikc0d] {
	display: block;
}

dialog[open].components-reconnect-resume-failed
	.components-resume-failed-visible[b-3hu2zikc0d],
dialog[open].components-resume-failed .components-resume-failed-visible[b-3hu2zikc0d] {
	display: block;
}

@keyframes reconnect-pulse-b-3hu2zikc0d {
	0%,
	80%,
	100% {
		transform: scale(0);
	}

	40% {
		transform: scale(1);
	}
}

@media (max-width: 600px) {
	.components-reconnect-backdrop[b-3hu2zikc0d] {
		padding: 14px;
	}

	.components-reconnect-surface[b-3hu2zikc0d] {
		padding: 16px;
	}
}