@use "sass:math";
@use "@wordpress/base-styles/colors" as *;
@use "@wordpress/base-styles/variables" as *;
@use "@wordpress/base-styles/z-index" as *;
@use "../utils/grid-items.scss" as *;

.dataviews-view-picker-grid {
	// When grouped, the density class is on the parent Composite,
	// and the gap is on child .dataviews-view-grid-items elements.
	&.has-compact-density .dataviews-view-grid-items {
		gap: $grid-unit-20;
	}

	&.has-comfortable-density .dataviews-view-grid-items {
		gap: $grid-unit-40;
	}

	.dataviews-view-picker-grid__card {
		height: 100%;
		justify-content: flex-start;
		position: relative;

		.dataviews-view-picker-grid__title-actions {
			padding: $grid-unit-10 0 $grid-unit-05;
		}

		.dataviews-view-picker-grid__title-field {
			min-height: $grid-unit-30; // Preserve layout when there is no ellipsis button
			overflow: hidden;
			align-content: center;
			text-align: start;

			&--clickable {
				width: fit-content;
			}
		}


		&.is-selected {
			.dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-value {
				color: $gray-900;
			}
		}
		&.is-selected .dataviews-view-picker-grid__media::after,
		.dataviews-view-picker-grid__media:focus::after {
			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
		}
		&.is-selected .dataviews-view-picker-grid__media::after {
			box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color);
		}
		.dataviews-view-picker-grid__media:focus::after {
			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
		}
	}

	&:focus-visible {
		// Only show one focus outline at a time. When focus is on a child element,
		// hide the grid's own focus outline.
		&[aria-activedescendant] {
			outline: none;
		}

		[data-active-item="true"] {
			outline: 2px solid var(--wp-admin-theme-color);
		}
	}

	.dataviews-selection-checkbox {
		// Always show the checkbox in picker mode.
		top: $grid-unit-10 !important;

		input {
			// When the dataview is used as a picker, ensure the checkbox can't be clicked on.
			// Only the item card itself is clickable.
			pointer-events: none;
		}
	}

	.dataviews-view-picker-grid__media {
		width: 100%;
		aspect-ratio: 1/1;
		min-height: 0;
		background-color: $white;
		border-radius: $radius-medium;
		position: relative;

		img {
			object-fit: cover;
			width: 100%;
			height: 100%;
		}

		&::after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.1);
			border-radius: $grid-unit-05;
			pointer-events: none;
		}
	}

	.dataviews-view-picker-grid__fields {
		position: relative;
		font-size: 12px;
		line-height: 16px;

		&:not(:empty) {
			padding: 0 0 $grid-unit-15;
		}

		.dataviews-view-picker-grid__field-value:not(:empty) {
			min-height: $grid-unit-30;
			line-height: $grid-unit-05 * 5;
			padding-top: math.div($grid-unit-05, 2);
		}

		.dataviews-view-picker-grid__field {
			min-height: $grid-unit-30;
			align-items: center;

			.dataviews-view-picker-grid__field-name {
				width: 35%;
				color: $gray-700;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.dataviews-view-picker-grid__field-value {
				width: 65%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			&:not(:has(.dataviews-view-picker-grid__field-value:not(:empty))) {
				display: none;
			}
		}
	}

	.dataviews-view-picker-grid__badge-fields {
		&:not(:empty) {
			padding-bottom: $grid-unit-15;
		}
	}
}

.dataviews-view-picker-grid__field-value:empty,
.dataviews-view-picker-grid__field:empty {
	display: none;
}

.dataviews-view-picker-grid__card .dataviews-selection-checkbox {
	position: absolute;
	top: -9999em;
	left: $grid-unit-10;
	z-index: z-index(".dataviews-view-grid__card .dataviews-selection-checkbox");

	@media (hover: none) {
		// Show checkboxes on devices that do not support hover.
		top: $grid-unit-10;
	}
}

.dataviews-view-picker-grid__card:hover .dataviews-selection-checkbox,
.dataviews-view-picker-grid__card:focus-within .dataviews-selection-checkbox,
.dataviews-view-picker-grid__card.is-selected .dataviews-selection-checkbox {
	top: $grid-unit-10;
}

.dataviews-view-picker-grid__media--clickable {
	cursor: pointer;
}

.dataviews-view-picker-grid-group__header {
	font-size: $font-size-large;
	font-weight: $font-weight-medium;
	color: $gray-900;
	margin: 0 0 $grid-unit-10 0;
	padding: 0 $grid-unit-60;
}