/**
 * Grid System Variables.
 * Based on WordPress design system (8px base unit).
 * @link https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
 */

// Base grid unit.
$grid-unit: 8px;

// Derived grid units (multiples of base unit).
$grid-unit-05: 0.5 * $grid-unit; // 4px
$grid-unit-10: 1 * $grid-unit; // 8px
$grid-unit-15: 1.5 * $grid-unit; // 12px
$grid-unit-20: 2 * $grid-unit; // 16px

/**
 * Component Dimensions.
 * Minimum width for modal/popover components.
 */
$modal-min-width: 350px;

/**
 * Dynamic Content Popover Component
 * Styles for the dynamic content popover interface
 */
.spectra-pro-dynamic-content-popover {
	position: relative;
	min-width: $modal-min-width;

	.components-popover__content {
		min-width: auto;
		width: 90vw;
		max-width: $modal-min-width;
		padding-top: $grid-unit-15;

		.block-editor-url-popover__input-container {
			padding: 0;

			.components-base-control {
				margin-left: $grid-unit-20;
				margin-right: $grid-unit-20;
			}

			/**
			 * Advanced Settings Section.
			 * Contains collapsible drawer for additional options.
			 */
			.spectra-pro-dynamic-content-advanced-settings {
				margin-bottom: $grid-unit-15;

				// Drawer toggle button styles
				&__drawer-toggle {
					margin-left: $grid-unit-05;
					gap: 0;

					// Remove all focus indicators (only if this is purely decorative).
					&:focus {
						border: none;
						outline: none;
						box-shadow: none;
					}

					// Expanded state styles.
					&[aria-expanded="true"] {
						color: #212529;

						svg {
							visibility: visible;
							transform: rotate(90deg);

							@media not ( prefers-reduced-motion ) {
								transition: transform 0.1s ease;
							}
						}
					}

					// Collapsed state styles.
					&[aria-expanded="false"] svg {
						visibility: visible;
						transform: rotate(0deg);

						@media not ( prefers-reduced-motion ) {
							transition: transform 0.1s ease;
						}
					}
				}

				// Drawer content area.
				&__drawer {
					padding-left: $grid-unit-20;
					padding-right: $grid-unit-20;

					.components-base-control {
						margin-left: 0;
						margin-right: 0;
					}
				}
			}

			// Footer section styles.
			.spectra-pro-dynamic-content-footer {
				padding-left: $grid-unit-20;
				padding-right: $grid-unit-20;
				padding-bottom: $grid-unit-20;
			}
		}
	}
}

/**
 * Dynamic Image Toolbar Popover Styles
 */
.spectra-pro-dynamic-image-popover {

	.components-popover__content {
		min-width: 350px;
		max-width: 450px;
		padding: 16px;

		/* Prevent accidental closing when interacting with content */
		pointer-events: auto;
	}

	/* Ensure toggle controls don't trigger popover close */
	.components-toggle-control,
	.components-button,
	.components-base-control {
		pointer-events: auto;
	}
}

/**
 * Shows dynamic content in the richtext editor with a distinctive style.
 */
.block-editor-block-list__layout .spectra-pro-dc-content {
	border-bottom: 2px double #0096ff;
	padding: 2px;
}

/**
 * Custom styles for dynamic link section within the link control component.
 */
.spectra-pro-block-editor-link-control {
	margin: $grid-unit-20;
}
