.ska-preset-row {
	flex-grow: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	border: 1px solid #949494;
	padding: 0 8px;
	margin-left: 1px;
	border-right: 0;
	background: #f9f9f9;

	&--managed {
		border-left: 2px solid var(--ska-primary);
	}

	&--loading-off {
		border-left: 2px solid var(--ska-color-warning);
		background: color-mix(in oklab, var(--ska-color-warning) 5%, transparent);
	}

	&--not-found {
		border-left: 2px solid var(--ska-color-negative);
		background: color-mix(in oklab, var(--ska-color-negative) 5%, transparent);
	}

	& > span {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 10rem;
	}
}

.ska-presets-preview {
	display: grid;
	gap: 16px;
	padding: 1px 0;

	@media (min-width: 640px) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	@media (min-width: 1024px) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	@media (min-width: 1280px) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	@media (min-width: 1536px) {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	&__preset {

		& > *:first-child {
			display: flex;
			flex-direction: column;
		}

		h3 {
			margin: 0;
		}

		code {
			display: block;
			max-width: 100%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.ska-preset-preview {
			box-sizing: border-box;
			border-width: 0;
			border-style: solid;
			border-color: #e5e7eb;
		}

		.components-card__header {
			flex-direction: column;
			align-items: start;
		}

		.components-card__body {
			flex-grow: 1;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.components-card__footer {
			justify-content: flex-start;

			& > *:last-child {
				margin-left: auto;
			}
		}

		& > div > *:not(.components-card__body) {
			background: #f9f9f9;
		}

		.components-card__body {
			text-align: center;
			background: repeating-conic-gradient(rgba(0, 0, 0, 0.015) 0% 25%, transparent 0% 50%) 50% / 20px 20px;
			max-height: 124px !important;
			overflow: hidden;
		}

		.ska-preset-preview {

			& > .ska-preset-preview__text {
				display: inline-block;
				margin: 0 auto;
				min-width: 120px;
				opacity: 0.5;
			}
		}

		&[data-slug*="ska-theme--"] {
			box-shadow: var(--ska-primary) 0 0 0 1px !important;

			& > div > * {
				border-color: rgba(var(--ska-primary--rgb), 0.5);

				&.components-card-header,
				&.components-card-footer {
					background: rgba(var(--ska-primary--rgb), 0.05) !important;
				}
			}
		}

		&[data-slug*="ska-theme--wc-"] {
			box-shadow: var(--ska-wc) 0 0 0 1px !important;

			& > div > * {
				border-color: rgba(var(--ska-wc--rgb), 0.5);

				&.components-card-header,
				&.components-card-footer {
					background: rgba(var(--ska-wc--rgb), 0.05) !important;
				}
			}
		}
	}
}

/** Indicate that static presets are synced. */
.ska-presets__toggle-static {
	color: var(--wp-block-synced-color);
}