@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 *;
@use "../../../dataviews/style" as *;

.dataviews-view-grid {
	padding: 0 $grid-unit-30 $grid-unit-30;
	display: flex;
	flex-direction: column;
	gap: $grid-unit-30;
	container-type: inline-size;
	margin-bottom: auto;

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

	&.has-compact-density {
		gap: $grid-unit-20;

		.dataviews-view-grid__row {
			gap: $grid-unit-20;
		}
	}

	&.has-comfortable-density {
		gap: $grid-unit-40;

		.dataviews-view-grid__row {
			gap: $grid-unit-40;
		}
	}

	.dataviews-view-grid__row {
		display: grid;
		gap: $grid-unit-30;

		.dataviews-view-grid__row__gridcell {
			border-radius: $radius-medium;
			position: relative;

			&[data-focus-visible]::after {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
				border-radius: $radius-medium;
				pointer-events: none;

				// Windows High Contrast mode will show this outline, but not the box-shadow.
				outline: 2px solid transparent;
			}
		}
	}
}

.dataviews-view-grid,
.dataviews-view-grid-infinite-scroll {

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

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

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

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

		&.dataviews-view-grid__media--placeholder {
			aspect-ratio: 3/1;
		}

		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-grid__media-placeholder {
			width: 100%;
			height: 100%;
			display: block;
			border-radius: $radius-medium;
			box-shadow: none;
			background: $gray-100;
		}
	}

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

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

		.dataviews-view-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-grid__field {
			min-height: $grid-unit-30;
			align-items: center;

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

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

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

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

	&.is-refreshing {
		@include dataviews-refreshing();
	}
}

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

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

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

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

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

.dataviews-view-grid__card .dataviews-view-grid__media-actions {
	position: absolute;
	z-index: 1;
	top: $grid-unit-05;
	opacity: 0;
	right: $grid-unit-05;

	.dataviews-all-actions-button {
		background-color: $white;
	}

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

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

.dataviews-view-grid__card:hover .dataviews-view-grid__media-actions,
.dataviews-view-grid__card:focus-within .dataviews-view-grid__media-actions,
.dataviews-view-grid__card .dataviews-view-grid__media-actions:has(.dataviews-all-actions-button[aria-expanded="true"]) {
	opacity: 1;
}

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

.dataviews-view-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-30;
	container-type: inline-size;
}