@use "@wordpress/base-styles/colors" as *;
@use "@wordpress/base-styles/variables" as *;
@use "../../../dataviews/style" as *;

div.dataviews-view-list {
	list-style-type: none;
}

.dataviews-view-list {
	margin: 0 0 auto;

	div[role="row"],
	div[role="article"] {
		margin: 0;
		border-top: 1px solid $gray-100;

		.dataviews-view-list__item-wrapper {
			position: relative;
			padding: $grid-unit-20 $grid-unit-30;
			box-sizing: border-box;
		}

		.dataviews-view-list__item-actions {
			display: flex;
			width: max-content;
			flex: 0 0 auto;
			gap: $grid-unit-05;
			white-space: nowrap;

			.components-button {
				position: relative;
				z-index: 1;
			}

			> div {
				height: $button-size-small;
			}

			> :not(:last-child) {
				flex: 0;
				overflow: hidden;
				width: 0;
			}
		}

		&:where(.is-selected, .is-hovered, :focus-within) {
			.dataviews-view-list__item-actions > :not(:last-child) {
				flex-basis: min-content;
				width: auto;
				overflow: unset;
			}
		}

		@media (hover: none) {
			// Show primary action on devices that do not support hover.
			.dataviews-view-list__item-actions > :not(:last-child) {
				flex-basis: min-content;
				width: auto;
				overflow: unset;
			}
		}

		&.is-selected.is-selected {
			border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);

			& + div[role="row"],
			& + div[role="article"] {
				border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
			}
		}

		&:not(.is-selected) {
			&:hover,
			&.is-hovered,
			&:focus-within {
				color: var(--wp-admin-theme-color);
				background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
				border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);

				& + div[role="row"],
				& + div[role="article"] {
					border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
				}

				.dataviews-title-field,
				.dataviews-view-list__field {
					color: var(--wp-admin-theme-color);
				}
			}
		}

	}

	div[role="row"].is-selected,
	div[role="row"].is-selected:focus-within,
	div[role="article"].is-selected,
	div[role="article"].is-selected:focus-within {
		.dataviews-view-list__item-wrapper {
			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
			color: $gray-900;

			.dataviews-title-field,
			.dataviews-view-list__field {
				color: $gray-900;
			}
		}
	}

	.dataviews-view-list__item {
		position: absolute;
		z-index: 1;
		inset: 0;
		scroll-margin: $grid-unit-10 0;
		appearance: none;
		border: none;
		background: none;
		padding: 0;
		cursor: pointer;

		&:focus-visible {
			outline: none;

			&::before {
				position: absolute;
				content: "";
				inset: var(--wp-admin-border-width-focus);
				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
				border-radius: $radius-small;
				// Windows High Contrast mode will show this outline, but not the box-shadow.
				outline: 2px solid transparent;
			}
		}
	}
	.dataviews-view-list__title-field {
		flex: 1;
		min-height: $grid-unit-30;
		line-height: $grid-unit-30;
		overflow: hidden;
		// The field should be in front of the main button in case it has a link/button.
		&:has(a, button) {
			z-index: 1;
		}
	}

	.dataviews-view-list__media-wrapper {
		width: $grid-unit-05 * 13;
		height: $grid-unit-05 * 13;
		overflow: hidden;
		position: relative;
		flex-shrink: 0;
		background-color: $white;
		border-radius: $radius-medium;

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

		&::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: $radius-medium;
		}
	}

	.dataviews-view-list__field-wrapper {
		flex-grow: 1;
		min-width: 0;
	}

	.dataviews-view-list__field {
		color: $gray-700;
	}

	.dataviews-view-list__fields {
		display: flex;
		gap: $grid-unit-15;
		row-gap: $grid-unit-05;
		flex-wrap: wrap;
		font-size: 12px;

		&:empty {
			display: none;
		}

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

		.dataviews-view-list__field-value {
			min-height: $grid-unit-30;
			line-height: $grid-unit-05 * 5;
			display: flex;
			align-items: center;
		}
	}

	& + .dataviews-pagination {
		justify-content: space-between;
	}

	// Density style overrides.
	&.has-compact-density {
		div[role="row"] {
			.dataviews-view-list__item-wrapper {
				padding: $grid-unit-10 $grid-unit-30;
			}

			.dataviews-view-list__title-field {
				min-height: $grid-unit-20;
				line-height: $grid-unit-20;
			}

			.dataviews-view-list__media-wrapper {
				width: $grid-unit-05 * 8;
				height: $grid-unit-05 * 8;
			}

			.dataviews-view-list__fields {
				gap: $grid-unit-10;
				row-gap: $grid-unit-05;

				.dataviews-view-list__field-value {
					min-height: $grid-unit-20;
					line-height: $grid-unit-05 * 4;
				}
			}
		}
	}

	&.has-comfortable-density {
		div[role="row"] {
			.dataviews-view-list__item-wrapper {
				padding: $grid-unit-30 $grid-unit-30;
			}

			.dataviews-view-list__title-field {
				min-height: $grid-unit-40;
				line-height: $grid-unit-40;
			}

			.dataviews-view-list__media-wrapper {
				width: $grid-unit-05 * 16;
				height: $grid-unit-05 * 16;
			}

			.dataviews-view-list__fields {
				gap: $grid-unit-20;
				row-gap: $grid-unit-10;

				.dataviews-view-list__field-value {
					min-height: $grid-unit-40;
					line-height: $grid-unit-05 * 6;
				}
			}
		}
	}

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

.dataviews-view-list__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;
}