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

.cloud-legend-tooltip {
	h3 {
		font-size: 16px;
		color: #fff;
		text-align: center;
	}

	td {
		vertical-align: top;
	}
}

.cloud-search-info {
	text-align: justify;

	small {
		color: #646970;
		float: inline-end;
	}
}

.thickbox-code-viewer {
	min-block-size: 250px;
	background-color: hsl(0deg 0% 96.5%);
	padding: 20px;
	border-radius: 10px;
}

#snippet-code-thickbox {
	display: block;
	inline-size: 100%;
}

.no-results {
	font-size: 15px;
}

.dashicons.cloud-synced {
	color: theme.$cloud;
}

.dashicons.cloud-downloaded {
	color: #e91e63;
}

.dashicons.cloud-not-downloaded {
	color: theme.$outline;
}

.dashicons.cloud-update {
	color: theme.$cloud-update;
}

.cloud_update a {
	color: theme.$cloud-update !important;
	text-decoration: underline;
}

.updated.column-updated span {
	text-decoration: dotted underline;
}

td.column-name {
	.cloud-icon {
		margin-inline-end: 3px;
	}
}

.cloud-snippet-download {
	color: theme.$accent !important;
}

.cloud-snippet-downloaded, .cloud-snippet-preview-style {
	color: #616161 !important;
}

.cloud-snippet-update {
	color: theme.$cloud-update !important;
}

#cloud-search-form {
	margin-block: 30px;
	text-align: center;
}

.input-group {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	max-inline-size: 900px;
	margin-block: 0;
	margin-inline: auto;
}

#cloud_search {
	display: block;
	padding-block: 0.375rem;
	padding-inline: 0.75rem;
	font-size: 1rem;
	color: #495057;
	background-clip: padding-box;
	border-radius: 0;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
	position: relative;
	flex: 1 1 auto;
	inline-size: 1%;
	margin-block-end: 0;

	&:focus {
		outline: 0;
		border: 1px solid #8c8f94;
		box-shadow: none;
	}
}

#cloud-select-prepend {
	margin-inline-end: -3px;
	border-start-end-radius: 0;
	border-end-end-radius: 0;
	position: relative;
	z-index: 2;
	color: theme.$accent;
	border-color: theme.$accent;
	background-color: #f6f7f7;

	&:hover {
		background-color: #f0f0f1;
		border-color: #0a4b78;
		color: #0a4b78;
	}
}

#cloud-search-submit {
	padding-block: 0;
	padding-inline: 15px;
	margin-inline-start: -3px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.cloud-search {
	margin-inline-start: 5px;
}

.bundle-group {
	margin-block-start: 10px;
	justify-content: space-between;
	display: flex;
	gap: 5px;
	flex-wrap: nowrap;
}

#cloud-bundles {
	color: #495057;
	display: flex;
	flex: 1 1 auto;
	font-size: 1rem;
	padding-block: 0.375rem;
	padding-inline: 0.75rem;
	position: relative;
	inline-size: 50%;
}

#cloud-bundle-show {
	inline-size: 10%;
}

#cloud-bundle-run {
	inline-size: 15%;
}

#bundle_share_name {
	color: #495057;
	font-size: 1rem;
	inline-size: 25%;
}

.heading-box {
	max-inline-size: 900px;
	margin: auto;
	padding-block-end: 1rem;
}

.cloud-search-heading {
	font-size: 23px;
	font-weight: 400;
	padding-block: 9px 4px;
	padding-inline: 0;
	line-height: 1.3;
	text-align: center;
	margin-block-end: 0;
}

.cloud-badge.ai-icon {
	font-size: 12px;
	padding: 3px;
	margin-inline-start: 5px;
	color: #b22222;
}

.cloud-search-card-bottom {
	min-block-size: 40px;
}

#cloud-search-results .cloud-snippets #the-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

	.plugin-card {
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.cloud-meta-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-grow: 1;
		}

		.column-name {
			display: flex;
			justify-content: space-between;

			h3 {
				display: inline-flex;
				flex-shrink: 1;
			}

			.title-icon {
				block-size: 90px;
				margin-block-start: -7px;
			}
		}

		.column-votes {
			display: inline-flex;
			gap: 3px;

			&:hover {
				.thumbs-up {
					stroke: #059669;
					fill: #6ee7b7;
					animation: thumb 1s ease-in-out infinite;
				}
			}

			.num-votes {
				display: inline-flex;
				align-items: flex-end;
			}
		}
	}

	.action-buttons {
		margin: 0;
		align-items: flex-end;

		.button {
			inline-size: 100%;
			text-align: center;
		}
	}
}

.cloud-snippets #the-list {
	.column-download {
		display: flex;
		flex-flow: column;
		text-align: end;
    
		li {
			list-style: none;
		}
	}
}

.cloud-connect-wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-block-size: 35px;
	margin-block: 0;
	margin-inline: 3px;
	float: inline-end;
	gap: 5px;
}

.cloud-table > tbody > tr {
	block-size: 80px;
	box-shadow: inset 0 -1px 0 rgb(0 0 0 / 10%);
}

.cloud-table > tbody > tr > td {
	max-inline-size: 250px;
}

.cloud-table tbody .active-snippet .column-name {
	font-weight: 400;
	max-inline-size: 400px;
	white-space: normal !important;
}

.cloud-table td .no-results {
	margin-block-start: 15px;
	color: #e32121;
	text-align: center;
}

.cloud-status-dot {
	block-size: 10px;
	inline-size: 10px;
	background-color: #ce0000;
	border-radius: 50%;


	.cloud-connect-active & {
		background-color: #25a349;
	}
}

.cloud-connect-text {
	color: #ce0000;

	.cloud-connect-active & {
		color: #2e7d32;
	}
}

.thumbs-up {
	inline-size: 1.25rem; /* 20px */
	block-size: 1.25rem; /* 20px */
	transform-origin: bottom left;

	&:hover {
		stroke: #059669;
		fill: #6ee7b7;
	}
}

.plugin-card-bottom {
	overflow: visible !important;
	display: flex;
	align-items: center;
}

.beta-test-notice {
	margin-block-start: 20px;
}

.highlight-yellow {
	background: #fefdba;
	padding: 3px;
	border-radius: 3px;
}

@keyframes thumb {
	0% {
		transform: rotate(0);
	}

	33% {
		transform: rotate(7deg);
	}

	66% {
		transform: rotate(-15deg);
	}

	90% {
		transform: rotate(5deg);
	}

	100% {
		transform: rotate(0);
	}
}