/*
 * What you're currently looking at is the source code of a legally protected, proprietary software.
 * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
 * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
 *
 * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
 */

@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";

.ck-editor__editable .multi-level-list {
	& li {
		& .multi-level-list__marker {
			&::before {
				/* Use CSS to display multi-level list markers to prevent breaking the composition.
				See https://github.com/ckeditor/ckeditor5-commercial/issues/6873. */
				content: attr(data-multi-level-list-marker);
			}
		}
	}
}

.ck-content .multi-level-list {
	list-style: none;

	& li {
		position: relative;

		& .multi-level-list__marker {
			pointer-events: none;

			/* Do not show list markers as selected. */
			&::selection {
				background-color: transparent;
			}

			/* Marker next to a block widget or old marker format (legacy content without span element in marker) */
			&:not(:has(span)) {
				position: absolute;
				padding-inline-end: 5px;
				transform: translate(-100%, 0);

				/* RTL styles */
				@mixin ck-dir rtl {
					transform: translate(100%, 0);
				}
			}

			/* Marker next to a paragraph like element in a new marker format with marker styling */
			&:has(span) {
				position: relative;
				width: 0;
				display: inline-block;
				text-wrap: nowrap;

				&::before,
				& > span {
					position: absolute;
					padding-inline-end: 5px;
					transform: translate(-100%, 0);

					/* RTL styles */
					@mixin ck-dir rtl {
						transform: translate(100%, 0);
					}
				}
			}
		}

		&.ck-list-marker-bold > .multi-level-list__marker,
		&.ck-list-marker-bold > * > .multi-level-list__marker {
			font-weight: bold;
		}

		&.ck-list-marker-italic > .multi-level-list__marker,
		&.ck-list-marker-italic > * > .multi-level-list__marker {
			font-style: italic;
		}

		&.ck-list-marker-color > .multi-level-list__marker,
		&.ck-list-marker-color > * > .multi-level-list__marker {
			color: var(--ck-content-list-marker-color);
		}

		&.ck-list-marker-font-family > .multi-level-list__marker,
		&.ck-list-marker-font-family > * > .multi-level-list__marker {
			font-family: var(--ck-content-list-marker-font-family);
		}

		&.ck-list-marker-font-size > .multi-level-list__marker,
		&.ck-list-marker-font-size > * > .multi-level-list__marker {
			font-size: var(--ck-content-list-marker-font-size);
		}

		&.ck-list-marker-font-size-tiny > .multi-level-list__marker,
		&.ck-list-marker-font-size-tiny > * > .multi-level-list__marker {
			font-size: var(--ck-content-font-size-tiny);
		}

		&.ck-list-marker-font-size-small > .multi-level-list__marker,
		&.ck-list-marker-font-size-small > * > .multi-level-list__marker {
			font-size: var(--ck-content-font-size-small);
		}

		&.ck-list-marker-font-size-big > .multi-level-list__marker,
		&.ck-list-marker-font-size-big > * > .multi-level-list__marker {
			font-size: var(--ck-content-font-size-big);
		}

		&.ck-list-marker-font-size-huge > .multi-level-list__marker,
		&.ck-list-marker-font-size-huge > * > .multi-level-list__marker {
			font-size: var(--ck-content-font-size-huge);
		}
	}
}

.ck-content[dir='rtl'] .multi-level-list {
	& li {
		& .multi-level-list__marker {
			&:not(:has(span)),
			& > span {
				transform: translate(100%, 0);
			}
		}
	}
}