style.scss

.dataviews-wrapper {
	height: 100%;
	overflow: auto;
	box-sizing: border-box;
	scroll-padding-bottom: $grid-unit-80;
}

.dataviews-filters__view-actions {
	box-sizing: border-box;
	padding: $grid-unit-15 $grid-unit-40 0;
	margin-bottom: $grid-unit-15;
	flex-shrink: 0;
	position: sticky;
	left: 0;

	.components-search-control {
		.components-base-control__field {
			max-width: 240px;
		}
	}
}

.dataviews-filters__container {
	padding-right: $grid-unit-40;

	.dataviews-filters__reset-button[aria-disabled="true"] {
		&,
		&:hover {
			opacity: 0;
		}

		&:focus {
			opacity: 1;
		}
	}
}

.dataviews-filters-button {
	position: relative;
}

.dataviews-pagination {
	position: sticky;
	bottom: 0;
	left: 0;
	background-color: $white;
	padding: $grid-unit-15 $grid-unit-40;
	border-top: $border-width solid $gray-100;
	color: $gray-700;
	flex-shrink: 0;
}

.dataviews-pagination__page-selection {
	font-size: 11px;
	text-transform: uppercase;
	font-weight: 500;
	color: $gray-900;
}

.dataviews-filters-options {
	margin: $grid-unit-40 0 $grid-unit-20;
}

.dataviews-view-table {
	width: 100%;
	text-indent: 0;
	border-color: inherit;
	border-collapse: collapse;
	position: relative;
	color: $gray-700;

	a {
		text-decoration: none;
		color: $gray-900;
		font-weight: 500;
	}
	th {
		text-align: left;
		color: $gray-900;
		font-weight: normal;
		font-size: $default-font-size;
	}
	td,
	th {
		padding: $grid-unit-15;
		white-space: nowrap;

		&[data-field-id="actions"] {
			text-align: right;
		}

		&.dataviews-view-table__checkbox-column {
			padding-right: 0;
		}

		.components-checkbox-control__input-container {
			margin: $grid-unit-05;
		}
	}
	tr {
		border-bottom: 1px solid $gray-100;

		.dataviews-view-table-header-button {
			gap: $grid-unit-05;
		}

		td:first-child,
		th:first-child {
			padding-left: $grid-unit-40;

			.dataviews-view-table-header-button,
			.dataviews-view-table-header {
				margin-left: - #{$grid-unit-10};
			}
		}

		td:last-child,
		th:last-child {
			padding-right: $grid-unit-40;
		}

		&:last-child {
			border-bottom: 0;
		}

		&.is-hovered {
			background-color: #f8f8f8;
		}

		.components-checkbox-control__input.components-checkbox-control__input {
			opacity: 0;

			&:checked,
			&:indeterminate,
			&:focus {
				opacity: 1;
			}
		}

		.dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
			opacity: 0;
		}

		&:focus-within,
		&.is-hovered,
		&:hover {
			.components-checkbox-control__input,
			.dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
				opacity: 1;
			}
		}

		&.is-selected {
			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
			color: $gray-700;

			&:hover {
				background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
			}
		}
	}
	thead {
		position: sticky;
		inset-block-start: 0;
		z-index: z-index(".dataviews-view-table thead");

		tr {
			border: 0;
		}
		th {
			background-color: $white;
			box-shadow: inset 0 -#{$border-width} 0 $gray-100;
			padding-top: $grid-unit-10;
			padding-bottom: $grid-unit-10;
			font-size: 11px;
			text-transform: uppercase;
			font-weight: 500;
			padding-left: $grid-unit-05;
		}
	}
	tbody {
		td {
			vertical-align: top;
		}
		.dataviews-view-table__cell-content-wrapper {
			min-height: $grid-unit-40;
			display: flex;
			align-items: center;

			> * {
				flex-grow: 1;
			}
		}
	}
	.dataviews-view-table-header-button {
		padding: $grid-unit-05 $grid-unit-10;
		font-size: 11px;
		text-transform: uppercase;
		font-weight: 500;

		&:not(:hover) {
			color: $gray-900;
		}

		span {
			speak: none;

			&:empty {
				display: none;
			}
		}
	}

	.dataviews-view-table-header {
		padding-left: $grid-unit-05;
	}

	.dataviews-view-table__actions-column {
		width: 1%;
	}

	&:has(tr.is-selected) {
		.components-checkbox-control__input {
			opacity: 1;
		}
	}
}

.dataviews-view-list__primary-field,
.dataviews-view-grid__primary-field,
.dataviews-view-table__primary-field {
	font-size: $default-font-size;
	font-weight: 500;
	color: $gray-900;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: block;
	width: 100%;

	a {
		text-decoration: none;
		color: inherit;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		display: block;
		width: 100%;

		&:hover {
			color: $gray-900;
		}
		@include link-reset();
	}

	button.components-button.is-link {
		text-decoration: none;
		color: inherit;
		font-weight: inherit;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		display: block;
		width: 100%;
	}
}

.dataviews-view-grid {
	margin-bottom: $grid-unit-30;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	grid-template-rows: max-content;
	padding: 0 $grid-unit-40;

	@include break-xlarge() {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
	}

	@include break-huge() {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
	}

	.dataviews-view-grid__card {
		border-radius: $radius-block-ui * 2;
		border: 1px solid $gray-200;
		height: 100%;
		justify-content: flex-start;

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

		.dataviews-view-grid__primary-field {
			min-height: $grid-unit-50;
		}
		&.is-selected {
			border-color: var(--wp-admin-theme-color);
			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);

			.dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
				color: $gray-900;
			}
		}
	}

	.dataviews-view-grid__media {
		width: 100%;
		min-height: 200px;
		aspect-ratio: 1/1;
		border-bottom: 1px solid $gray-200;
		background-color: $gray-100;
		border-radius: 3px 3px 0 0;

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

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

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

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

.dataviews-view-list {
	margin: 0;
	padding: $grid-unit-10;

	li {
		margin: 0;
		cursor: pointer;

		.dataviews-view-list__item-wrapper {
			position: relative;
			padding-right: $grid-unit-30;
			border-radius: $grid-unit-05;

			&::after {
				position: absolute;
				content: "";
				top: 100%;
				left: $grid-unit-30;
				right: $grid-unit-30;
				background: $gray-100;
				height: 1px;
			}

			> * {
				width: 100%;
			}
		}

		&:not(.is-selected) {
			&:hover,
			&:focus-within {
				color: var(--wp-admin-theme-color);

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

	li.is-selected,
	li.is-selected:focus-within {
		.dataviews-view-list__item-wrapper {
			background-color: var(--wp-admin-theme-color);
			color: $white;

			.dataviews-view-list__primary-field,
			.dataviews-view-list__fields,
			.components-button {
				color: $white;
			}

			&::after {
				background: transparent;
			}
		}
	}

	.dataviews-view-list__item {
		padding: $grid-unit-15 0 $grid-unit-15 $grid-unit-30;
		width: 100%;
		scroll-margin: $grid-unit-10 0;

		&:focus {
			&::before {
				position: absolute;
				content: "";
				top: -1px;
				right: -1px;
				bottom: -1px;
				left: -1px;
				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
				z-index: -1;
				border-radius: $grid-unit-05;
			}
		}
		.dataviews-view-list__primary-field {
			min-height: $grid-unit-05 * 5;
		}
	}

	.dataviews-view-list__media-wrapper {
		width: $grid-unit-50;
		height: $grid-unit-50;
		border-radius: $grid-unit-05;
		overflow: hidden;
		position: relative;
		flex-shrink: 0;
		background-color: $gray-100;

		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: $grid-unit-05;
		}
	}

	.dataviews-view-list__media-placeholder {
		min-width: $grid-unit-40;
		height: $grid-unit-40;
		background-color: $gray-200;
	}

	.dataviews-view-list__fields {
		color: $gray-700;
		display: flex;
		gap: $grid-unit-10;
		flex-wrap: wrap;
		font-size: 12px;
		line-height: $grid-unit-20;

		.dataviews-view-list__field {
			margin: 0;

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

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

	.dataviews-view-list__details-button {
		align-self: center;
		opacity: 0;
	}

	li.is-selected,
	li:hover,
	li:focus-within {
		.dataviews-view-list__details-button {
			opacity: 1;
		}
	}

	li.is-selected {
		.dataviews-view-list__details-button {
			&:focus {
				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) currentColor;
			}
		}
	}
}

.dataviews-action-modal {
	z-index: z-index(".dataviews-action-modal");
}

.dataviews-no-results,
.dataviews-loading {
	padding: 0 $grid-unit-40;
	flex-grow: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dataviews-view-table-selection-checkbox label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.dataviews-filters__custom-menu-radio-item-prefix {
	display: block;
	width: 24px;
}

.dataviews-bulk-edit-button.components-button {
	flex-shrink: 0;
}

.dataviews-view-grid__title-actions .dataviews-view-table-selection-checkbox {
	margin-left: $grid-unit-10;
}

.dataviews-filter-summary__popover {
	.components-popover__content {
		width: 230px;
		padding: 0;
		border-radius: $grid-unit-05;
	}
}

.dataviews-search-widget-filter-combobox-list {
	max-height: $grid-unit * 23;
	padding: $grid-unit-05;
	overflow: auto;
	border-top: 1px solid $gray-200;

	.dataviews-search-widget-filter-combobox-item-value {
		[data-user-value] {
			font-weight: 600;
		}
	}
}

.dataviews-search-widget-listbox {
	max-height: $grid-unit * 23;
	padding: $grid-unit-05;
	overflow: auto;
}

.dataviews-search-widget-listitem {
	display: flex;
	align-items: center;
	gap: $grid-unit-10;
	border-radius: $radius-block-ui;
	box-sizing: border-box;
	padding: $grid-unit-10 $grid-unit-15;
	cursor: default;
	margin-block-end: 2px;

	&:last-child {
		margin-block-end: 0;
	}

	&:hover,
	&[data-active-item],
	&:focus {
		background-color: var(--wp-admin-theme-color);
		color: $white;

		.dataviews-search-widget-listitem-check {
			fill: $white;
		}

		.dataviews-search-widget-listitem-description {
			color: $white;
		}
	}

	.dataviews-search-widget-listitem-check {
		width: 24px;
		height: 24px;
		flex-shrink: 0;
	}

	.dataviews-search-widget-listitem-description {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: $helptext-font-size;
		line-height: 16px;
		color: $gray-700;
	}
}

.dataviews-search-widget-filter-combobox__wrapper {
	position: relative;
	padding: $grid-unit-10;

	.dataviews-search-widget-filter-combobox__input {
		@include input-control;
		display: block;
		padding: 0 $grid-unit-40 0 $grid-unit-10;
		background: $gray-100;
		border: none;
		width: 100%;
		height: $grid-unit-40;

		// Unset inherited values.
		margin-left: 0;
		margin-right: 0;

		/* Fonts smaller than 16px causes mobile safari to zoom. */
		font-size: $mobile-text-min-font-size;
		@include break-small {
			font-size: $default-font-size;
		}

		&:focus {
			background: $white;
			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
		}

		&::placeholder {
			color: $gray-700;
		}

		&::-webkit-search-decoration,
		&::-webkit-search-cancel-button,
		&::-webkit-search-results-button,
		&::-webkit-search-results-decoration {
			-webkit-appearance: none;
		}
	}

	.dataviews-search-widget-filter-combobox__icon {
		position: absolute;
		right: $grid-unit-15;
		top: 50%;
		transform: translateY(-50%);
		display: flex;
		align-items: center;
		justify-content: center;
		width: $icon-size;
	}
}

.dataviews-filter-summary__operators-container {
	padding: $grid-unit-10 $grid-unit-10 0;

	&:has(+ .dataviews-search-widget-listbox) {
		border-bottom: 1px solid $gray-200;
		padding-bottom: $grid-unit-10;
	}

	&:empty {
		display: none;
	}

	.dataviews-filter-summary__operators-filter-name {
		color: $gray-700;
	}
}

.dataviews-filter-summary__chip-container {
	position: relative;
	white-space: pre-wrap;

	.dataviews-filter-summary__chip {
		border-radius: $grid-unit-20;
		border: 1px solid transparent;
		cursor: pointer;
		padding: 0 $grid-unit-15;
		height: $grid-unit-40;
		background: $gray-100;
		color: $gray-700;
		position: relative;
		display: flex;
		align-items: center;

		&.has-reset {
			padding-inline-end: $button-size-small + $grid-unit-05;
		}

		&:hover,
		&:focus-visible,
		&[aria-expanded="true"] {
			background: $gray-200;
			color: $gray-900;
		}

		&.has-values {
			color: var(--wp-admin-theme-color);
			background: rgba(var(--wp-admin-theme-color--rgb), 0.04);

			&:hover,
			&[aria-expanded="true"] {
				background: rgba(var(--wp-admin-theme-color--rgb), 0.12);
			}
		}

		&:focus-visible {
			outline: none;
			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
		}

		.dataviews-filter-summary__filter-text-name {
			font-weight: 500;
		}
	}

	.dataviews-filter-summary__chip-remove {
		width: $icon-size;
		height: $icon-size;
		border-radius: 50%;
		border: 0;
		padding: 0;
		position: absolute;
		right: $grid-unit-05;
		top: 50%;
		transform: translateY(-50%);
		display: flex;
		align-items: center;
		justify-content: center;
		background: transparent;
		cursor: pointer;

		svg {
			fill: $gray-700;
		}

		&:hover,
		&:focus {
			background: $gray-200;
			svg {
				fill: $gray-900;
			}
		}

		&.has-values {
			svg {
				fill: var(--wp-admin-theme-color);
			}
			&:hover {
				background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
			}
		}

		&:focus-visible {
			outline: none;
			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
		}
	}
}