@use '../common/theme';
@use '../common/cards';

.cloud-search-result {
	p:last-child {
		margin-block-end: 0;
	}

	.card-inner {
		display: flex;
		flex-flow: column;
		gap: 16px;
	}

	.snippet-card-header {
		display: flex;
		align-items: center;
		gap: 10px;

		// Keep header content clear of the absolutely-positioned selection checkbox.
		padding-inline-end: 32px;

		h3 {
			margin: 0;
			font-size: 18px;
			font-weight: 700;
			line-height: 1.5;
			min-inline-size: 0;
		}

		.cloud-snippet-title-button {
			display: block;
			max-inline-size: 100%;
			margin: 0;
			padding: 0;
			border: none;
			background: none;
			font: inherit;
			color: theme.$accent;
			cursor: pointer;
			text-align: start;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;

			&:hover, &:focus {
				text-decoration: underline;
			}

			&:focus-visible {
				outline: 2px solid theme.$accent;
				outline-offset: 2px;
				border-radius: 2px;
			}
		}
	}

	.snippet-card-meta {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 16px;
		font-size: 14px;
		line-height: 1.5;

		.cloud-snippet-tags {
			color: theme.$accent;
		}

		.snippet-card-modified {
			color: #6c7e7e;
			margin-inline-start: auto;
		}
	}

	.snippet-description-content {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
		margin: 0;
		font-size: 14px;
		line-height: 1.5;
		color: #646970;
		border-block-start: 1px solid #dcdcde;
		padding-block-start: 16px;
	}

	.cloud-snippet-author {
		margin: 0;
		font-size: 14px;
		color: #646970;

		a {
			color: theme.$accent;
		}
	}

	footer {
		.dashicons-warning {
			color: #b32d2e;
		}

		.cloud-snippet-update svg {
			display: block;
		}

		.button {
			font-size: 14px;
			line-height: 2.5714;
			border-radius: 5px;
		}

		.button:not(.button-primary, .cloud-pro-button) {
			background: transparent;
		}
	}
}

.cloud-search-results .cloud-search-result footer .components-spinner {
	margin: 0;
}

// Pro-only actions use the same quiet outline treatment in card and table views.
.cloud-pro-button.button {
	background-color: transparent;
	border-color: theme.$accent;
	color: theme.$accent;

	&:hover,
	&:focus {
		background-color: #eff5f9;
		border-color: theme.$accent;
		color: theme.$accent;
	}
}

// Three equal-height snippet cards per row, matching the manage snippets
// grid. minmax(0, 1fr) lets columns shrink below their content width so
// the grid never overflows the page.
ul.cloud-search-results.code-snippets-cards {
	grid-template-columns: repeat(3, minmax(0, 1fr));

	@media (width <= 1100px) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	@media (width <= 782px) {
		grid-template-columns: minmax(0, 1fr);
	}

	.code-snippets-card {
		min-inline-size: 0;

		footer {
			flex-wrap: wrap;
		}
	}

	// Reveal the bulk-select checkbox on hover or keyboard focus, and keep
	// every checkbox visible while any card in the grid is selected so an
	// in-progress selection is never hidden.
	.snippet-card-select {
		opacity: 0;
		transition: opacity 0.15s ease;

		@media (prefers-reduced-motion: reduce) {
			transition-duration: 0.01s;
		}
	}

	.snippet-card-select:checked,
	&.has-selection .snippet-card-select,
	.code-snippets-card:hover .snippet-card-select,
	.code-snippets-card:focus-within .snippet-card-select {
		opacity: 1;
	}
}