.ska-blocks__presets-control {
	margin-top: -12px;
	margin-left: -16px;
	margin-right: -16px;

	& > .components-base-control__field {

		& > .components-notice {
			margin-inline: 8px;
		}
	}

	&__search {
		margin-top: 4px;
		margin-bottom: 16px !important;
		margin-left: 8px;
		margin-right: 8px;

		& .components-base-control__help {
			margin-top: 0;
		}
	}

	&__filters {
		margin-top: -8px;
		margin-bottom: 10px !important;
		margin-left: 8px;
		margin-right: 8px;
	}

	/** No matching presets. */
	&__notice {
		margin-top: 8px;
		margin-left: 8px;
		margin-right: 8px;
	}

	&__recompile-stale {
		margin-top: 8px;
		align-self: flex-start;
	}

	&__actions {
		margin-top: 16px;
		margin-bottom: 8px;
		padding-left: 8px;
		padding-right: 8px;
	}

	&__preset {
		margin-left: 8px;
		margin-right: 8px;
		padding: 8px;
		background: rgb(224 224 224 / 10%);
		border: 1px solid rgb(224 224 224 / 50%);
		border-radius: 2px;

		&[id*="ska-theme--"] {
			background: rgba(var(--ska-primary--rgb), 0.05);
			border-color: rgba(var(--ska-primary--rgb), 0.5);
		}

		&[id*="ska-theme--wc-"] {
			background: rgba(var(--ska-wc--rgb), 0.05);
			border-color: rgba(var(--ska-wc--rgb), 0.5);
		}

		&__label {
			font-size: 13px;
			font-weight: 500;
			line-height: 1;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: flex-start;

			&__sup {
				display: block;
				font-size: 11px;
				line-height: 1.4;
				text-transform: uppercase;
			}

			.ska-components-label__group {
				margin-top: 4px;
			}
		}

		.ska-presets-preview__preset {
			margin-bottom: 1px;
		}

		&__preset-edit {

			& > .ska-panel {
				border-top: 0 !important;
			}
		}

		&__info {
			margin-bottom: 0;
		}

		&__error {
			margin-bottom: 0;
			color: #cc1818;
		}

		p.description {
			margin-bottom: 0;
			color: rgb(0 0 0 / 0.7);
			font-size: 12px;
			line-height: 1.2;
		}
	}
}