.wp-block-list {
	margin-block-start: 1.5rem;
	margin-block-end: 1rem;
	padding-inline-start: 0;
	list-style: none;

	&:first-child {
		margin-block-start: 0;
	}
	&:last-child {
		margin-block-end: 0;
	}

	&:is(.is-style-default, :not([class*="is-style-"])) {
		padding-inline-start: 1.5rem;
		line-height: 1.9;
		list-style: disc;

		&.has-background {
			padding: 2rem;
			padding-inline-start: 3.5rem;
			border-radius: var(--wp--preset--border-radius--lg);
		}

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

	&.is-style-check {
		grid-template-columns: 1fr;
	}
	&.is-style-check-col2 {
		grid-template-columns: repeat(2, 1fr);
	}
	&.is-style-check-col3 {
		grid-template-columns: repeat(3, 1fr);
	}

	&:is(.is-style-check, .is-style-check-col2, .is-style-check-col3) {
		display: grid;
		gap: 1rem;

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

		&.has-background {
			padding: 2rem;
			border-radius: var(--wp--preset--border-radius--lg);
		}

		li {
			position: relative;
			padding-inline-start: calc(var(--wp--preset--font-size--x-large-2) * 1.5);

			ion-icon {
				position: absolute;
				top: 4px;
				left: 0;
				color: var(--wp--preset--color--primary);
				font-size: var(--wp--preset--font-size--x-large-2);
			}
		}
	}

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

		li {
			position: relative;
			padding-inline-start: 1.5rem;
		}

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

	&.is-style-anchor-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
		padding: 2rem;
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--wp--preset--border-radius--lg);

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

		li {
			display: flex;
			align-items: center;
			padding: 0.5rem 1rem;
			overflow: hidden;

			&:has(a) {
				padding: 0;

				a {
					display: flex;
					gap: 0.5rem;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					padding: 0.5rem 1rem;
					font-size: var(--wp--preset--font-size--x-large);
					background-color: var(--wp--preset--color--white);
					border: 1px solid var(--wp--preset--color--primary);
					border-radius: var(--wp--preset--border-radius--sm);

					&:hover {
						color: var(--wp--preset--color--light-01);
						background-color: var(--wp--preset--color--primary);
					}
				}
			}
		}
	}

	&.is-style-page-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
		list-style: none;
		padding-inline-start: 0;

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

		li {
			display: flex;
			align-items: center;
			padding: 0.5rem 1rem;
			overflow: hidden;

			&:has(a) {
				padding: 0;

				a {
					display: flex;
					gap: 0.5rem;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					padding: 0.5rem 2rem;
					font-size: var(--wp--preset--font-size--medium);
					background-color: var(--wp--preset--color--white);
					border: 1px solid var(--wp--preset--color--primary);
					border-radius: var(--wp--preset--border-radius--full);
					text-decoration: none;
					line-height: 1.5;
					&:hover {
						color: var(--wp--preset--color--light-01);
						background-color: var(--wp--preset--color--primary);
					}
				}
			}
		}
	}

	&.is-style-ol-point1 {
		padding-inline-start: 2rem;
		list-style-type: decimal;

		li::marker {
			color: var(--wp--preset--color--primary);
			font-weight: 700;
			font-size: var(--wp--preset--font-size--x-large);
		}
	}

	&.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: 23px;
				left: calc(-50% + 25px);
				width: calc(100% - 50px);
				height: 1px;
				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--light-01);
				line-height: 50px;
				background-color: var(--wp--preset--color--primary);
				border-radius: 50%;
			}

			&.is-style-step-visited {
				&::after {
					background-color: var(--wp--preset--color--primary);
				}

				span {
					color: var(--wp--preset--color--primary);
					background-color: var(--wp--preset--color--white);
					border: 1px solid var(--wp--preset--color--primary);
				}
			}
		}
	}
}