@import '@wordpress/base-styles/breakpoints';
@import '@wordpress/base-styles/mixins';
@import '@wordpress/dataviews/build-style/style.css';

.dataviews-wrapper {
	// Maybe move upstream to the gutenberg repository
	width: 100%;
	padding-block-end: 40px;

	@include break-mobile {
		padding-block-end: 0;
	}

	tr.dataviews-view-table__row {

		.components-checkbox-control__input {
			opacity: 0;
		}
		.components-checkbox-control__input:checked,
		.components-checkbox-control__input:indeterminate {
			opacity: 1;
		}

		&:hover {
			.site-set-favorite__favorite-icon,
			.components-checkbox-control__input {
				opacity: 1;
			}
		}

		th {
			font-size: rem( 13px );
			font-weight: 400;
			vertical-align: middle;
		}

		td {
			vertical-align: middle;

			&:has( .sites-dataviews__site ) {
				width: 20%;
			}
		}

		.dataviews-view-table__cell-content-wrapper {
			font-size: rem( 13px );
		}

		.dataviews-view-table__checkbox-column,
		.components-checkbox-control__input {
			label.components-checkbox-control__label {
				display: none;
			}
			&[type='checkbox'] {
				border-color: var( --color-neutral-5 );
			}
		}

		.site-sort__clickable {
			cursor: pointer;
		}
	}

	ul.dataviews-view-list {
		li:hover {
			background: var( --color-neutral-0 );
		}
		.is-selected {
			background-color: var( --color-neutral-0 );
		}

		// Needs to be moved upstream to the gutenberg repository.
		.dataviews-view-list__item {
			box-sizing: border-box;
		}
	}

	.components-search-control input[type='search'].components-search-control__input {
		background: var( --studio-white );
		border: 1px solid var( --color-neutral-5 );
	}

	thead .dataviews-view-table__row th {
		span.dataviews-view-table-header,
		button {
			font-size: rem( 11px );
			font-weight: 500;
			line-height: 20px;
			text-transform: uppercase;
		}

		.dataviews-view-table-header-button {
			color: inherit;
		}
	}

	.sites-dataviews__actions {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: end;
		flex-wrap: nowrap;

		@media ( min-width: 1080px ) {
			.site-actions__actions-large-screen {
				float: none;
				margin-inline-end: 20px;
			}
		}

		> *:not( :last-child ) {
			margin-inline-end: 10px;
		}

		.components-dropdown-menu__toggle,
		.site-preview__open {
			.gridicon {
				width: 18px;
				height: 18px;
			}
		}

		&.sites-dataviews__actions-error {
			svg {
				color: var( --color-accent-5 );
			}
		}
	}

	// Color overrides for focus states of Action button
	.components-button:focus:not( :disabled ) {
		--wp-components-color-accent: var( --color-primary-light );
	}
}
