.wp-block-list {
	&.is-style-default {
		padding-left: 1.5rem;
		line-height: 1.9;
		li {
			&::marker {
				color: var(--wp--preset--color--primary);
			}
		}
	}

	&.is-style-check {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1rem;

		@media (width <= 767px) {
			grid-template-columns: 1fr;
		}

		li {
			display: flex;
			align-items: center;

			ion-icon {
				margin-inline-end: 0.5rem;
				color: var(--wp--preset--color--primary);
				font-size: var(--wp--preset--font-size--2-xl);
			}
		}

		+ p {
			margin-block-start: 1rem;
		}
	}

	&.is-style-point1 {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1rem;
		color: var(--wp--preset--color--dark-01);

		li {
			position: relative;
			padding-left: 1.5rem;
		}

		ion-icon {
			position: absolute;
			left: 0;
			flex: none;
			margin-block-start: 0.3rem;
			font-size: var(--wp--preset--font-size--xl);
		}

		+ .wp-block-table {
			margin-block-start: 1rem;
		}
	}

	&.is-style-num {
		padding-left: 1.5rem;
		line-height: 1.9;
		list-style-type: decimal;

		li {
			&::marker {
				color: var(--wp--preset--color--primary);
				font-size: var(--wp--preset--font-size--xl);
			}

			+ li {
				margin-block-start: 1rem;
			}
		}
	}

	&.is-style-page-list,
	&.is-style-page-list-col2 {
		display: grid;
		gap: 1rem;

		li {
			display: flex;
			align-items: center;
			height: 100%;
			padding: 0.5rem 1rem;
			background-color: var(--wp--preset--color--alto-03);
			border-radius: 5px;
		}

		li:has(a) {
			height: 100%;
			padding: 0;
			background-color: var(--wp--preset--color--white);
			border-radius: 0;

			a {
				display: flex;
				gap: 0.5rem;
				align-items: center;
				width: 100%;
				height: 100%;
				padding: 0.5rem 1rem;
				color: var(--wp--preset--color--primary);
				background-color: var(--wp--preset--color--primary-light);
				border: 1px solid var(--wp--preset--color--primary);
				border-radius: 5px;
				transition: 0.3s ease;
				text-decoration: none;

				&:hover {
					opacity: 0.7;
				}
			}
		}
	}

	&.is-style-page-list {
		grid-template-columns: 1fr;
		@media (width <= 767px) {
			grid-template-columns: 1fr;
		}
	}

	&.is-style-page-list-col2 {
		grid-template-columns: repeat(2, 1fr);

		@media (width <= 767px) {
			grid-template-columns: 1fr;
		}
	}

	&.is-style-step-bar {
		position: relative;
		display: flex;
		max-width: 400px;
		margin: 2rem auto;
		text-align: center;

		li {
			position: relative;
			width: calc(100% / 3);

			+ li {
				&::after {
					position: absolute;
					top: calc(25px - 2px);
					left: calc(-50% + 25px);
					width: calc(100% - 50px);
					height: 4px;
					background-color: var(--wp--preset--color--primary);
					content: "";
				}
			}

			span {
				display: inline-block;
				width: 50px;
				height: 50px;
				margin-block-end: 5px;
				color: var(--wp--preset--color--white);
				line-height: 50px;
				background-color: var(--wp--preset--color--primary);
				border-radius: 50%;
			}

			&.visited {
				&::after {
					background-color: var(--wp--preset--color--secondary);
				}

				span {
					background-color: var(--wp--preset--color--secondary);
				}
			}
		}
	}

	+ * {
		margin-block-start: 1rem;
	}

	+ h2 {
		margin-block-start: 4rem;
	}
}

ul.is-style-default {
	list-style: disc;
}

ol.is-style-default {
	list-style: decimal;
}