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

.media-upload-modal {
	.components-modal__header {
		padding-bottom: $grid-unit-10;
	}

	.components-modal__frame.is-full-screen .components-modal__content {
		margin-bottom: 0;
	}

	.components-modal__content {
		padding: 0;
	}

	.dataviews-picker-wrapper > .dataviews__view-actions {
		padding-top: $grid-unit-10;
	}

	.media-upload-modal__footer {
		position: sticky;
		bottom: 0;
		background-color: inherit;
		// Match the z-index the footer normally has, since we take over sticky.
		z-index: 2;

		&.is-uploading .dataviews-picker-footer__bulk-selection {
			visibility: hidden;
		}

		// The inner footer no longer needs sticky/z-index since the wrapper handles it.
		.dataviews-footer {
			position: static;
			z-index: auto;
		}
	}

	.media-upload-modal__upload-status {
		position: absolute;
		display: flex;
		align-items: center;
		gap: $grid-unit-10;
		background-color: var(--wp-dataviews-color-background, $white);
		// Match the footer's padding so the trigger aligns with the item count.
		left: $grid-unit-30;
		top: 1px;
		bottom: 1px;
		z-index: 1;

		.components-spinner {
			width: $grid-unit-20;
			height: $grid-unit-20;
			margin: 0;
		}
	}
}

.media-upload-modal__snackbar {
	@include snackbar-container();
	z-index: 200000;

	// Override the transform and transform-origin applied by the Snackbar component
	// to prevent the snackbar from shifting position when its content changes while
	// the media upload modal is open. This is an edge case particular to the media
	// upload modal when instantiated from a popover, such as the Replace control in
	// the Image Block. In that case, the Framer Motion transform appears to get
	// confused by the Snackbars being a child of the popover.
	> div {
		transform: none !important;
		transform-origin: 0 !important;
	}
}

.media-upload-modal__upload-status__popover {
	.components-popover__content {
		width: 320px;
	}

	.media-upload-modal__upload-status__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: $grid-unit-15 $grid-unit-20;
		h3 {
			margin: 0;
			font-size: 13px;
			font-weight: $font-weight-medium;
		}
	}

	.media-upload-modal__upload-status__list {
		max-height: 200px;
		overflow-y: auto;
		margin: 0;
		padding: 0 0 $grid-unit-05;
		list-style: none;
	}

	.media-upload-modal__upload-status__item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 0;
		justify-content: space-between;
		gap: $grid-unit-10;
		padding: $grid-unit-10 $grid-unit-20;

		.components-spinner {
			flex-shrink: 0;
			width: $grid-unit-20;
			height: $grid-unit-20;
			margin: 0;
		}
	}

	.media-upload-modal__upload-status__filename {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		min-width: 0;
		flex: 1;
		font-size: 12px;
	}
}