@import '../../../../../../../../src/assets/styles/design-tokens';

.wizard-container {
	@include ov-container;
	@include ov-page-content;
	min-height: 600px;
	gap: 0;
	padding-top: 0;
}

.wizard-header {
	@include ov-get-started-header;

	h2 {
		margin-bottom: var(--ov-meet-spacing-md);
		font-size: var(--ov-meet-font-size-xxl);
		font-weight: var(--ov-meet-font-weight-light);
		color: var(--ov-meet-text-primary);
	}
}

.wizard-content {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

.step-content {
	@include ov-section-card;
	width: 100%;
	max-width: 600px;
	min-height: 450px;
	max-height: 450px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.step-content > :first-child {
	margin: auto 0;
	width: 100%;
	min-height: min-content;
}

.wizard-footer {
	flex: 1;
	display: flex;
	justify-content: center;
	.basic-nav,
	.wizard-nav {
		width: 100%;
		max-width: 650px;
		display: flex;
		flex-direction: column;
	}

	.basic-nav .wizard-navigation {
		padding: var(--ov-meet-spacing-md) 0 0 0;
	}
	.cancel-button {
		@include ov-button-base;
		border-radius: var(--ov-meet-radius-sm);
		min-width: 120px;
		color: var(--ov-meet-text-secondary);
		border-color: var(--ov-meet-border-color-strong);
		&:hover {
			background-color: var(--ov-meet-surface-hover);
		}
	}
}

.toggle-label {
	font-size: var(--ov-meet-font-size-md);
	font-weight: var(--ov-meet-font-weight-medium);
	color: var(--ov-meet-text-primary);
}

.debug-section {
	margin-top: var(--ov-meet-spacing-md);

	summary {
		cursor: pointer;
		font-size: var(--ov-meet-font-size-sm);
		font-weight: var(--ov-meet-font-weight-medium);
		color: var(--ov-meet-text-secondary);
		margin-bottom: var(--ov-meet-spacing-sm);

		&:hover {
			color: var(--ov-meet-text-primary);
		}
	}

	&[open] summary {
		color: var(--ov-meet-color-primary);
	}
}

// Slide toggle customization
.ov-slide-toggle-success {
	.mat-mdc-slide-toggle {
		--mdc-switch-selected-track-color: var(--ov-meet-color-success);
		--mdc-switch-selected-handle-color: var(--ov-meet-color-success);
		--mdc-switch-selected-hover-handle-color: var(--ov-meet-color-success);
		--mdc-switch-selected-focus-handle-color: var(--ov-meet-color-success);
		--mdc-switch-selected-pressed-handle-color: var(--ov-meet-color-success);
	}
}

// Room Creation Loading State
.room-creation-loading {
	@include ov-flex-center;
	flex-direction: column;
	height: 100%;
	min-height: 400px;
	text-align: center;
	padding: var(--ov-meet-spacing-xl);

	.loading-content {
		@include ov-flex-center;
		flex-direction: column;
		gap: var(--ov-meet-spacing-xl);
		width: 100%;

		.loading-header {
			margin-bottom: var(--ov-meet-spacing-lg);

			.loading-title {
				@include ov-flex-center;
				gap: var(--ov-meet-spacing-md);
				margin-bottom: var(--ov-meet-spacing-md);

				.loading-icon {
					@include ov-icon(xl);
					animation: pulse 2s ease-in-out infinite;
				}

				h2 {
					margin: 0;
					font-size: var(--ov-meet-font-size-xl);
					font-weight: var(--ov-meet-font-weight-medium);
					color: var(--ov-meet-text-primary);
				}
			}

			.loading-subtitle {
				font-size: var(--ov-meet-font-size-md);
				color: var(--ov-meet-text-secondary);
				margin: 0;
				animation: fadeIn 1s ease-out 0.5s both;
			}
		}

		.loading-spinner-container {
			mat-spinner {
				margin: 0 auto;

				::ng-deep {
					.mdc-circular-progress__determinate-circle,
					.mdc-circular-progress__indeterminate-circle-graphic {
						stroke: var(--ov-meet-color-primary);
					}
				}
			}
		}
	}
}

// Responsive design using the system mixins
@include ov-tablet-down {
	.wizard-container {
		padding: var(--ov-meet-spacing-md);
	}

	.wizard-header {
		padding-bottom: var(--ov-meet-spacing-md);

		h2 {
			font-size: var(--ov-meet-font-size-xl);
		}
	}

	.room-creation-loading {
		padding: var(--ov-meet-spacing-lg);

		.loading-content {
			.loading-header {
				.loading-title {
					h2 {
						font-size: var(--ov-meet-font-size-lg);
					}
				}
			}
		}
	}
}

@include ov-mobile-down {
	.wizard-header {
		h2 {
			font-size: var(--ov-meet-font-size-lg);
		}
	}
}
