ul.has-operiva-list-layout-horizontal,
ol.has-operiva-list-layout-horizontal {
	column-gap: 2rem;
	display: flex;
	flex-wrap: wrap;
	row-gap: 0.75rem;
}

ul.has-operiva-list-alignment-left,
ol.has-operiva-list-alignment-left {
	margin-left: 0;
	margin-right: auto;
}

ul.has-operiva-list-alignment-center,
ol.has-operiva-list-alignment-center,
ul.has-operiva-list-alignment-right,
ol.has-operiva-list-alignment-right {
	max-width: 100%;
	width: fit-content;
}

ul.has-operiva-list-alignment-center,
ol.has-operiva-list-alignment-center {
	margin-left: auto;
	margin-right: auto;
}

ul.has-operiva-list-alignment-right,
ol.has-operiva-list-alignment-right {
	margin-left: auto;
	margin-right: 0;
}

ul.has-operiva-list-layout-horizontal:not(.has-operiva-list-icon),
ol.has-operiva-list-layout-horizontal:not(.has-operiva-list-icon) {
	list-style-position: inside;
	padding-left: 0;
}

ul.has-operiva-list-icon,
ol.has-operiva-list-icon,
ul.has-operiva-list-icon-preview,
ol.has-operiva-list-icon-preview {
	list-style: none;
	padding-left: 0;
}

ul.has-operiva-list-icon > li,
ol.has-operiva-list-icon > li,
ul.has-operiva-list-icon-preview > li,
ol.has-operiva-list-icon-preview > li {
	--operiva-list-checkmark-size: 0.75rem;
	--operiva-list-icon-size: 1.25rem;
	--operiva-list-icon-offset: 0.25rem;
	--operiva-list-icon-spacing: 0.5rem;

	padding-left: calc(
		var(--operiva-list-icon-size) + var(--operiva-list-icon-spacing)
	);
	position: relative;
}

ul.has-operiva-list-icon > li::before,
ol.has-operiva-list-icon > li::before,
ul.has-operiva-list-icon-preview > li::before,
ol.has-operiva-list-icon-preview > li::before,
.editor-styles-wrapper .has-operiva-list-icon-preview ul > li::before,
.editor-styles-wrapper .has-operiva-list-icon-preview ol > li::before {
	background-color: #d6f0ff;
	border-radius: 999px;
	content: "";
	height: var(--operiva-list-icon-size);
	left: 0;
	position: absolute;
	top: 0.2em;
	width: var(--operiva-list-icon-size);
}

ul.has-operiva-list-icon > li::after,
ol.has-operiva-list-icon > li::after,
ul.has-operiva-list-icon-preview > li::after,
ol.has-operiva-list-icon-preview > li::after,
.editor-styles-wrapper .has-operiva-list-icon-preview ul > li::after,
.editor-styles-wrapper .has-operiva-list-icon-preview ol > li::after {
	background-color: #0ea5e9;
	content: "";
	height: var(--operiva-list-checkmark-size);
	left: var(--operiva-list-icon-offset);
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E");
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
	position: absolute;
	top: calc(0.2em + var(--operiva-list-icon-offset));
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E");
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	width: var(--operiva-list-checkmark-size);
}

@supports (top: 0.5lh) {
	ul.has-operiva-list-icon > li::before,
	ol.has-operiva-list-icon > li::before,
	ul.has-operiva-list-icon-preview > li::before,
	ol.has-operiva-list-icon-preview > li::before,
	.editor-styles-wrapper .has-operiva-list-icon-preview ul > li::before,
	.editor-styles-wrapper .has-operiva-list-icon-preview ol > li::before {
		top: 0.5lh;
		transform: translateY(-50%);
	}

	ul.has-operiva-list-icon > li::after,
	ol.has-operiva-list-icon > li::after,
	ul.has-operiva-list-icon-preview > li::after,
	ol.has-operiva-list-icon-preview > li::after,
	.editor-styles-wrapper .has-operiva-list-icon-preview ul > li::after,
	.editor-styles-wrapper .has-operiva-list-icon-preview ol > li::after {
		top: 0.5lh;
		transform: translateY(-50%);
	}
}

.editor-styles-wrapper .has-operiva-list-layout-horizontal ul,
.editor-styles-wrapper .has-operiva-list-layout-horizontal ol {
	column-gap: 2rem;
	display: flex;
	flex-wrap: wrap;
	row-gap: 0.75rem;
}

.editor-styles-wrapper .has-operiva-list-alignment-left ul,
.editor-styles-wrapper .has-operiva-list-alignment-left ol {
	margin-left: 0;
	margin-right: auto;
}

.editor-styles-wrapper .has-operiva-list-alignment-center ul,
.editor-styles-wrapper .has-operiva-list-alignment-center ol,
.editor-styles-wrapper .has-operiva-list-alignment-right ul,
.editor-styles-wrapper .has-operiva-list-alignment-right ol {
	max-width: 100%;
	width: fit-content;
}

.editor-styles-wrapper .has-operiva-list-alignment-center ul,
.editor-styles-wrapper .has-operiva-list-alignment-center ol {
	margin-left: auto;
	margin-right: auto;
}

.editor-styles-wrapper .has-operiva-list-alignment-right ul,
.editor-styles-wrapper .has-operiva-list-alignment-right ol {
	margin-left: auto;
	margin-right: 0;
}

.editor-styles-wrapper
	.has-operiva-list-layout-horizontal:not(.has-operiva-list-icon-preview)
	ul,
.editor-styles-wrapper
	.has-operiva-list-layout-horizontal:not(.has-operiva-list-icon-preview)
	ol {
	list-style-position: inside;
	padding-left: 0;
}

.editor-styles-wrapper .has-operiva-list-icon-preview ul,
.editor-styles-wrapper .has-operiva-list-icon-preview ol {
	list-style: none;
	padding-left: 0;
}

.editor-styles-wrapper .has-operiva-list-icon-preview ul > li,
.editor-styles-wrapper .has-operiva-list-icon-preview ol > li {
	--operiva-list-checkmark-size: 0.75rem;
	--operiva-list-icon-size: 1.25rem;
	--operiva-list-icon-offset: 0.25rem;
	--operiva-list-icon-spacing: 0.5rem;

	padding-left: calc(
		var(--operiva-list-icon-size) + var(--operiva-list-icon-spacing)
	);
	position: relative;
}