/**
 * Core wp:core/list and wp:core/list-item custom styles.
 *
 * Handles wp:core/list-item block variations.
 *
 * author Elisa
 * version 1.0
 */

.wp-block-list {
	&.is-style-arrow-list-beige,
	&.is-style-arrow-list-cream {
		padding-left: 5px;
		list-style-type: none;

		& li {
			position: relative;
			padding-left: var(--wp--preset--spacing--60);
			counter-increment: list-item;
			min-height: var(--wp--preset--spacing--50);
			margin-bottom: var(--wp--preset--spacing--10);
			font-family: var(--wp--preset--font-family--paragraph);

			&::before {
				content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 11.332L10 7.66536L6 3.9987" stroke="%232D3D32" stroke-width="2" stroke-linecap="square"/></svg>');
				display: inline-flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				line-height: 0;
				left: 0;
				top: -2px;
				width: var(--wp--preset--spacing--40);
				height: var(--wp--preset--spacing--40);
				border-radius: 100%;
				margin-right: var(--wp--preset--spacing--20);
			}
		}
	}

	/* Color variations of arrow bg. */
	&.is-style-arrow-list-beige {
		& li {
			&::before {
				background-color: var(--wp--preset--color--tertiary);
			}
		}
	}

	&.is-style-arrow-list-cream {
		& li {
			&::before {
				background-color: var(--wp--preset--color--quaternary);
			}
		}
	}

	&.is-style-orange-bullets {
		text-transform: uppercase;
		padding-left: 5px;
		margin-left: 5px;

		& li {
			margin-bottom: 5px;

			&::marker {
				color: var(--wp--preset--color--secondary);
			}

			& a {
				&:hover {
					color: var(--wp--preset--color--secondary);
					text-decoration: none;
				}
			}
		}
	}

	& .has-quaternary-background-color .wp-block-list li::before {
		background-color: var(--wp--preset--color--white);
	}

	& ol {
		&.wp-block-list {
			padding-left: 5px;
			counter-reset: list-item;

			&[start="4"] {
				counter-reset: list-item 4;
			}
			&[start="5"] {
				counter-reset: list-item 4;
			}
			&[start="6"] {
				counter-reset: list-item 4;
			}
			&[start="7"] {
				counter-reset: list-item 4;
			}
			&[start="8"] {
				counter-reset: list-item 4;
			}

			& li::marker {
				font-size: 0;
			}

			& li::before {
				content: counter(list-item) ".";
				font-size: var(--wp--preset--font-size--medium);
				color: var(--wp--preset--color--primary);
				font-weight: 600;
			}
		}
	}
}