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

.meeting-url-badge {
	margin: var(--ov-meet-spacing-sm) auto;
	.meeting-url-badge-title {
		text-align: center;
		font-size: var(--ov-meet-font-size-sm);
		font-weight: var(--ov-meet-font-weight-light);
		color: var(--ov-text-surface-color); // Use ov-components variable
		margin-bottom: var(--ov-meet-spacing-sm);

		&.sm {
			font-size: var(--ov-meet-font-size-sm);
		}
		&.md {
			font-size: var(--ov-meet-font-size-md);
		}
		&.lg {
			font-size: var(--ov-meet-font-size-lg);
		}
		&.xl {
			font-size: var(--ov-meet-font-size-xl);
		}

		&.light {
			font-weight: var(--ov-meet-font-weight-light);
		}
		&.semibold {
			font-weight: var(--ov-meet-font-weight-semibold);
		}
		&.bold {
			font-weight: var(--ov-meet-font-weight-bold);
		}
		&.normal {
			font-weight: var(--ov-meet-font-weight-normal);
		}
	}

	.meeting-url-badge-subtitle {
		text-align: center;
		font-size: var(--ov-meet-font-size-md);
		color: var(--ov-text-surface-color); // Use ov-components variable
		margin: var(--ov-meet-spacing-sm);
	}
	.meeting-url-badge-container {
		@include design-tokens.ov-flex-center;
		@include design-tokens.ov-theme-transition;
		gap: var(--ov-meet-spacing-sm);
		padding: var(--ov-meet-spacing-sm) var(--ov-meet-spacing-md);
		background-color: var(--ov-surface-color); // Use ov-components variable
		border: 1px solid var(--ov-meet-border-color-light);
		color: var(--ov-text-surface-color); // Use ov-components variable
		border-radius: var(--ov-meet-radius-lg);
		max-width: fit-content;
		margin: auto;
		cursor: pointer;

		.meeting-url-text {
			font-family: var(--ov-meet-font-family-mono, 'Roboto Mono', monospace);
			font-size: var(--ov-meet-font-size-sm);
			color: var(--ov-text-surface-color); // Use ov-components variable
			font-weight: var(--ov-meet-font-weight-medium);
			letter-spacing: 0.025em;
			user-select: none;
			word-break: break-all;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;

			&:hover {
				text-decoration: underline;
			}
		}

		.copy-url-btn {
			@include design-tokens.ov-button-base;
			width: 32px;
			height: 32px;
			min-width: 32px;
			padding: 0;
			color: var(--ov-secondary-action-color);
			cursor: pointer;
			background: transparent;
			border: 0;

			.mat-icon {
				@include design-tokens.ov-icon(sm);
			}

			&:hover {
				background-color: var(--ov-hover-color);
				color: var(--ov-text-surface-color);
			}
		}
	}
}

@include design-tokens.ov-mobile-down {
	.meeting-url-badge-container {
		margin: var(--ov-meet-spacing-md) auto;
		padding: var(--ov-meet-spacing-xs) var(--ov-meet-spacing-sm);

		.meeting-url-text {
			font-size: var(--ov-meet-font-size-xs);
		}

		.copy-url-btn {
			width: 28px;
			height: 28px;
			min-width: 28px;
		}
	}
}
