@use "@wordpress/base-styles/colors" as *;
@use "@wordpress/base-styles/mixins" as *;
@use "@wordpress/base-styles/variables" as *;

@mixin preview-overlay {
	border-radius: $radius-small;
	background: $white;
}

@mixin compact-drop-zone-label {
	// Align text and icons horizontally to avoid clipping when we show the compact placeholder.
	.components-drop-zone .components-drop-zone__content-inner {
		display: flex;
		align-items: center;
		gap: $grid-unit-10;

		.components-drop-zone__content-icon {
			margin: 0;
		}
	}
}

fieldset.fields__media-edit {
	// Reset `fieldset` browser defaults.
	border: 0;
	padding: 0;
	margin: 0;
	width: 100%;

	.components-base-control__label {
		color: $gray-900;
	}

	.fields__media-edit-description {
		font-size: $helptext-font-size;
		line-height: 1.5;
	}

	container-type: inline-size;

	.fields__media-edit-compact-group {
		border: $border-width dashed $gray-600;
		border-radius: $radius-medium;

		&.is-single {
			border-radius: $radius-small;
		}

		.fields__media-edit-picker-button {
			border: 0;

			&:focus-visible {
				@include outset-ring__focus();
				// The visible border belongs to the parent group, not the button,
				// so offset by its width to keep the same gap as standalone buttons.
				outline-offset: calc(var(--wpds-border-width-focus) + #{ $border-width });
			}
		}

		.fields__media-edit-compact:not(:last-child) {
			border-bottom: $border-width solid $gray-100;
		}
	}

	.fields__media-edit-compact {
		@include compact-drop-zone-label;
		position: relative;
		min-width: 0;

		&:hover,
		&:focus-within {
			.fields__media-edit-compact-movers {
				opacity: 1;
			}
		}

		.fields__media-edit-compact-movers {
			position: absolute;
			right: $grid-unit-10;
			top: 50%;
			transform: translateY(-50%);
			opacity: 0;
			pointer-events: none;
			z-index: 1;
			@include preview-overlay;

			* {
				pointer-events: auto;
			}
		}
	}

	// Apply to placeholders outside of expanded view (compact contexts)
	.fields__media-edit-picker-button:has(.fields__media-edit-placeholder):not(.fields__media-edit-expanded *) {
		@include compact-drop-zone-label;
	}

	.fields__media-edit-picker-button {
		position: relative;
		display: flex;
		align-items: center;
		gap: $grid-unit-10;
		border: $border-width dashed $gray-600;
		border-radius: $radius-small;
		padding: $grid-unit-05 $grid-unit-10;
		min-height: $grid-unit-50;
		cursor: var(--wpds-cursor-control);
		min-width: 0;

		&:not(.has-attachment) {
			border-color: var(--wp-admin-theme-color);
			color: var(--wp-admin-theme-color);

			&:hover {
				background-color: color-mix(in srgb, var(--wp-admin-theme-color, #3858e9) 4%, transparent);
				color: var(--wp-admin-theme-color-darker-20);
				border-color: var(--wp-admin-theme-color-darker-20);
			}
		}

		&:hover {
			color: var(--wp-admin-theme-color);
		}

		&[aria-disabled="true"] {
			opacity: 0.6;
			cursor: default;
		}

		&:focus-visible {
			@include outset-ring__focus();
		}

		.fields__media-edit-picker-button-spinner {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 1;
		}
	}

	.fields__media-edit-filename,
	.fields__media-edit-placeholder {
		flex: 1;
		width: 100%;
		min-width: 0;
	}

	.fields__media-edit-placeholder {
		text-align: center;
	}

	.fields__media-edit-thumbnail {
		width: $grid-unit-30;
		aspect-ratio: 1 / 1;
		flex-shrink: 0;
		border-radius: $radius-small;
		@include checkerboard-background( 4px );
	}

	.fields__media-edit-expanded {
		// Always use grid layout
		display: grid;
		gap: $grid-unit-10;

		&.is-empty {
			@include compact-drop-zone-label;
		}

		.fields__media-edit-expanded-preview {
			position: relative;
			width: 100%;
			aspect-ratio: var(--fields-media-edit-expanded-multiple-aspect-ratio, 3/2);
			border-radius: $radius-small;
			padding: $grid-unit-05;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;

			.fields__media-edit-expanded-preview-stack {
				width: 100%;
				height: 100%;
			}
		}

		.fields__media-edit-expanded-overlay {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			opacity: 0;
			pointer-events: none;

			* {
				pointer-events: auto;
			}
		}

		.fields__media-edit-expanded-actions {
			position: absolute;
			top: $grid-unit-05;
			right: $grid-unit-05;
			@include preview-overlay;
		}

		.fields__media-edit-expanded-item {
			position: relative;
			min-width: 0;
			border-radius: $radius-medium;

			&:hover,
			&:focus-within {
				.fields__media-edit-expanded-overlay {
					opacity: 1;
				}
			}

			&:not(.has-preview-image) {
				.fields__media-edit-expanded-preview-stack {
					padding: $grid-unit-10;
				}
			}
		}

		.fields__media-edit-thumbnail {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: 50% 50%;
			@include checkerboard-background( 12px );
		}

		.fields__media-edit-filename {
			text-align: center;
			flex: none;
		}

		.fields__media-edit-picker-button-spinner {
			svg {
				margin: 0;
			}
		}

		&.is-single {
			grid-template-columns: 1fr;

			.fields__media-edit-expanded-preview {
				aspect-ratio: 2/1;
			}
		}

		// Picker button in expanded context gets medium radius by default
		.fields__media-edit-picker-button {
			border-radius: $radius-medium;
		}

		// In empty state, use small radius
		&.is-empty .fields__media-edit-picker-button {
			border-radius: $radius-small;
		}

		&.is-multiple:not(.is-empty) {
			// Auto-fill columns based on minimum item width
			grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

			@container (max-width: 500px) {
				grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
			}
		}

		&:not(.is-empty) {
			.fields__media-edit-picker-button {
				padding: 0;
			}

			.fields__media-edit-placeholder {
				display: flex;
				align-items: center;
				justify-content: center;
				aspect-ratio: var(--fields-media-edit-expanded-multiple-aspect-ratio, 3/2);
			}
		}
	}
}