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

.ov-page-container {
	height: 100vh;
	overflow: auto;
}

.recordings-page-header {
	@include design-tokens.ov-container;
	@include design-tokens.ov-page-content;
	gap: 0;
	padding-bottom: 0;
	padding-top: var(--ov-meet-spacing-xxl);
	background: var(--ov-meet-background-color);
	height: fit-content;
}

// Room Header
.recordings-header {
	@include design-tokens.ov-flex-center;
	flex-direction: row;
	gap: var(--ov-meet-spacing-md);
	text-align: center;

	.room-icon {
		@include design-tokens.ov-icon(xl);
		color: var(--ov-meet-icon-recordings);
		margin-bottom: var(--ov-meet-spacing-sm);
	}

	.room-info {
		.room-title {
			margin: 0;
			font-size: var(--ov-meet-font-size-xl);
			font-weight: var(--ov-meet-font-weight-light);
			color: var(--ov-meet-text-primary);
			line-height: var(--ov-meet-line-height-tight);

			.room-name {
				font-weight: var(--ov-meet-font-weight-semibold);
				color: var(--ov-meet-text-primary);
			}
		}
	}
}

// === CONTENT SECTIONS ===

.recordings-content {
	@include design-tokens.ov-container;
	@include design-tokens.ov-page-content;
	flex: 1;
	padding-bottom: var(--ov-meet-spacing-xl);
}

.recordings-loading-container {
	@include design-tokens.ov-container;
	@include design-tokens.ov-flex-center;
	min-height: 60vh;
	padding: var(--ov-meet-spacing-xxl);
}

.loading-card {
	@include design-tokens.ov-card;
	@include design-tokens.ov-flex-center;
	flex-direction: column;
	gap: var(--ov-meet-spacing-lg);
	text-align: center;
	max-width: 400px;
	padding: var(--ov-meet-spacing-xxl);

	.loading-icon {
		@include design-tokens.ov-icon(xl);
		color: var(--ov-meet-icon-recordings);
		margin-bottom: var(--ov-meet-spacing-md);
	}

	.loading-title {
		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 {
		margin: 0;
		font-size: var(--ov-meet-font-size-md);
		color: var(--ov-meet-text-secondary);
		line-height: var(--ov-meet-line-height-relaxed);
	}

	.loading-spinner-container {
		margin-top: var(--ov-meet-spacing-lg);
	}
}

// === RESPONSIVE DESIGN ===

@include design-tokens.ov-tablet-down {
	.recordings-page-header {
		padding-top: var(--ov-meet-spacing-lg);
		gap: var(--ov-meet-spacing-lg);
	}

	.recordings-header {
		.room-icon {
			@include design-tokens.ov-icon(lg);
		}

		.room-info {
			.room-title {
				font-size: var(--ov-meet-font-size-xxl);
			}

			.room-subtitle {
				font-size: var(--ov-meet-font-size-md);
			}
		}
	}

	.description-card {
		padding: var(--ov-meet-spacing-md);

		.description-content .description-text {
			font-size: var(--ov-meet-font-size-sm);
		}
	}
}

@include design-tokens.ov-mobile-down {
	.recordings-page-header {
		padding: var(--ov-meet-spacing-md);
	}

	.recordings-content {
		margin-top: var(--ov-meet-spacing-md);
		padding: var(--ov-meet-spacing-sm);
		margin-bottom: var(--ov-meet-spacing-xxl);
	}

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

		.loading-icon {
			@include design-tokens.ov-icon(lg);
		}

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

		.loading-subtitle {
			font-size: var(--ov-meet-font-size-sm);
		}
	}
}
