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

.ov-page-container {
	button {
		padding: var(--ov-meet-button-padding-vertical) var(--ov-meet-button-padding-horizontal);
	}
}
// API Key Section - use utility classes
.api-key-section {
	.api-key-display {
		@extend .ov-api-key-display;

		.api-key-actions {
			display: flex;
			align-items: center;

			.copy-button {
				color: var(--ov-meet-primary);
				border-radius: var(--ov-meet-border-radius-sm);
				white-space: nowrap;

				.mat-icon {
					margin-right: var(--ov-meet-spacing-xs);
				}
			}

			.toggle-visibility-button {
				padding: var(--ov-meet-spacing-sm);
			}
		}

		.api-key-field {
			button {
				padding: 0;
			}
		}
	}

	.no-api-key {
		text-align: center;
		padding: var(--ov-meet-spacing-sm);

		h3 {
			color: var(--ov-meet-text-primary);
			font-size: var(--ov-meet-font-size-xl);
			margin-bottom: var(--ov-meet-spacing-md);
		}

		p {
			color: var(--ov-meet-text-secondary);
			font-size: var(--ov-meet-font-size-md);
			max-width: 450px;
			margin: 0 auto;
		}

		button {
			margin-top: var(--ov-meet-spacing-lg);
		}
	}
}

// Webhooks Section - simplified with utilities
.webhooks-section {
	.webhook-form {
		@extend .ov-settings-form-section;

		.full-width {
			width: 100%;
		}

		.webhook-section-title {
			margin: 0;
		}

		.webhook-toggle {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 var(--ov-meet-spacing-md) var(--ov-meet-spacing-md) 0;

			::ng-deep button {
				padding: 0 !important;
			}
		}

		// Input field styling
		.mat-mdc-form-field {
			margin-bottom: var(--ov-meet-spacing-lg);

			::ng-deep .mat-mdc-text-field-wrapper {
				&.mdc-text-field--disabled {
					background-color: var(--ov-meet-surface-variant);
				}

				border-radius: var(--ov-meet-border-radius-sm);
			}

			::ng-deep .mdc-notched-outline__leading,
			::ng-deep .mdc-notched-outline__notch,
			::ng-deep .mdc-notched-outline__trailing {
				border-color: var(--ov-meet-border-color);
			}
		}
	}
}

// Card Actions - responsive button layout
.mat-mdc-card-actions {
	padding: var(--ov-meet-spacing-lg) var(--ov-meet-spacing-xl);
	gap: var(--ov-meet-spacing-sm);
	border-top: 1px solid var(--ov-meet-border-color);
	margin: auto;

	#revoke-key-btn {
		color: var(--ov-meet-color-error);
		border-color: var(--ov-meet-color-error);
	}

	@include design-tokens.ov-mobile-down {
		flex-direction: column;

		.mat-mdc-button,
		.mat-mdc-raised-button,
		.mat-mdc-stroked-button {
			width: 100%;
			margin: var(--ov-meet-spacing-xs) 0;
		}
	}
}
