22

✏️ Editing: _cloud-community.scss

@use '../common/notices';
@use '../common/checkbox';
@use '../common/theme';

.cloud-snippet-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--cs-color-text-muted);
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;

&::before {
		content: '';
		block-size: 10px;
		inline-size: 10px;
		border-radius: 50%;
		display: inline-block;
	}

&-public::before {
		background: var(--cs-cloud-status-public-color);
	}

&-private::before {
		background: var(--cs-cloud-status-private-color);
	}

&-unverified::before {
		background: var(--cs-cloud-status-unverified-color);
	}

&-ai-verified::before {
		background: var(--cs-cloud-status-ai-verified-color);
	}

&-pro-verified::before {
		background: var(--cs-cloud-status-pro-verified-color);
	}
}

.bundle-share-code-form,
.cloud-search-form {
	display: flex;
	gap: 8px;
	margin-block: 0 47px;
	block-size: 54px;

> select {
		flex: 0 0 250px;
	}

.button {
		flex: 0 0 165px;
	}

.cloud-search-query {
		flex: 1;
		position: relative;

input {
			inline-size: 100%;
			block-size: 100%;
		}

> .components-spinner {
			position: absolute;
			inset-inline-end: 1.5em;
			inset-block-start: 25%;
		}
	}

button[type='submit'] {
		display: inline-flex;
		align-items: center;
		justify-content: center;

.components-spinner {
			margin: 0;
		}
	}
}

.cloud-search {
	@include notices.notices('banner');

padding-block-start: 10px;

.banner {
		justify-content: center;
	}

}

.bundle-share-code-form {
	max-inline-size: 60%;
}

.cloud-snippet-action-buttons {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;

// Keep the Download / Edit / Pro Only button a consistent width so
	// rows line up regardless of which state the snippet is in.
	.button-primary,
	.cloud-pro-button,
	.button:not(.button-primary) {
		inline-size: 103px;
		min-inline-size: 103px;
		text-align: center;
		justify-content: center;
	}
}

.cloud-snippets-table {
	// Body rows inherit the shared table-cell padding so descriptions can grow
	// naturally instead of being constrained to a fixed row height.
	tbody td {
		vertical-align: middle;
	}

.check-column {
		vertical-align: middle;

input[type='checkbox'] {
			@include checkbox.canonical;
		}
	}

.column-name {
		inline-size: 22%;
	}

.column-desc {
		inline-size: 30%;
		min-inline-size: 18rem;
	}

.column-type {
		inline-size: 90px;
	}

.column-status {
		inline-size: 120px;
	}

.column-actions {
		inline-size: 234px;
	}

.cloud-table-name-button {
		background: none;
		border: 0;
		padding: 0;
		margin: 0;
		font-size: inherit;
		font-weight: 600;
		color: var(--cs-color-accent);
		text-decoration: none;
		cursor: pointer;
		text-align: start;

&:hover,
		&:focus-visible {
			color: #135e96;
			text-decoration: underline;
		}
	}

// Clamp descriptions so every row stays the same height.
	.cloud-table-description {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
	}
}

// Community bundles tab shares the same top padding as .cloud-search so the
// two tabs' descriptions and inputs align (scoped so the My Library bundles
// tab is unaffected).
.community-bundles {
	padding-block-start: 10px;
}

MR SKB