.wp-block-list {
	& + * {
		margin-block-start: 1rem;
	}

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

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

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

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

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

			svg.pxlm-icon {
				margin-inline-end: 0.5rem;
				color: var(--wp--preset--color--primary);
				font-size: var(--wp--preset--font-size--xx-large);
			}
		}

		& + * {
			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-inline-start: 1.5rem;
		}

		svg.pxlm-icon {
			position: absolute;
			inset-inline-start: 0;
			flex: none;
			margin-block-start: 0.5rem;
			color: var(--wp--preset--color--primary);
			font-size: var(--wp--preset--font-size--small);
		}

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

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

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

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

		li {
			display: flex;
			align-items: center;
			padding-block: 0.5rem;
			padding-inline: 1rem;
			background-color: var(--wp--preset--color--alto-05);
			border-radius: var(--wp--preset--border-radius--medium);
		}

		.link {
			padding-block: 0;
			padding-inline: 0;
			background-color: var(--wp--preset--color--light-01);
			border-radius: var(--wp--preset--border-radius--none);

			a {
				display: flex;
				gap: 0.5rem;
				align-items: center;
				justify-content: space-between;
				inline-size: 100%;
				padding-block: 0.5rem;
				padding-inline: 1rem;
				border-block-width: 1px;
				border-block-style: solid;
				border-block-color: var(--wp--preset--color--line);
				border-inline-width: 1px;
				border-inline-style: solid;
				border-inline-color: var(--wp--preset--color--line);
			}
		}
	}

	&.is-style-page-list {
		grid-template-columns: 1fr;

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

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

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

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

		li {
			position: relative;
			inline-size: 33.3333333333%;
			text-transform: uppercase;

			& + li::after {
				position: absolute;
				inset-block-start: 23px;
				inset-inline-start: calc(-50% + 25px);
				inline-size: calc(100% - 50px);
				block-size: 1px;
				background-color: var(--wp--preset--color--primary);
				content: "";
			}

			span {
				display: inline-block;
				inline-size: 50px;
				block-size: 50px;
				margin-block-end: 5px;
				color: var(--wp--preset--color--light-01);
				line-height: 50px;
				background-color: var(--wp--preset--color--primary);
				border-radius: var(--wp--preset--border-radius--full);
			}

			&.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--light-01);
					border-block-width: 1px;
					border-block-style: solid;
					border-block-color: var(--wp--preset--color--primary);
					border-inline-width: 1px;
					border-inline-style: solid;
					border-inline-color: var(--wp--preset--color--primary);
				}
			}
		}
	}

	&.is-style-ol-point1 > li::marker {
		color: var(--wp--preset--color--primary);
		font-weight: 500;
		font-size: var(--wp--preset--font-size--xx-large);
	}

	&.is-style-float-side {
		display: flex;
		flex-flow: column;
		list-style: none;
		padding-inline: 0;
		border-block-start-width: 1px;
		border-block-start-style: solid;
		border-block-start-color: var(--wp--preset--color--primary);
		border-inline-start-width: 1px;
		border-inline-start-style: solid;
		border-inline-start-color: var(--wp--preset--color--primary);
		border-block-end-width: 1px;
		border-block-end-style: solid;
		border-block-end-color: var(--wp--preset--color--primary);

		li {
			a {
				text-decoration: none;
				display: block;
				color: var(--wp--preset--color--primary);
				padding-block: var(--wp--preset--spacing--20);
				padding-inline: var(--wp--preset--spacing--20);
				font-family: var(--wp--preset--font-family--google-sans);
				transition-property: background-color, color;
				transition-duration: 0.3s, 0.3s;
				transition-timing-function: ease, ease;
			}

			&:nth-child(1) a {
				background-color: var(--wp--preset--color--primary);
				color: var(--wp--preset--color--light-01);
			}

			&:nth-child(2) a {
				border-block-start-width: 1px;
				border-block-start-style: solid;
				border-block-start-color: var(--wp--preset--color--primary);
				background-color: var(--wp--preset--color--light-01);

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

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

	&.is-style-language {
		display: inline-flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin-block: 0;
		margin-inline: 0;
		padding-block: 0;
		padding-inline: 0;
		list-style: none;
		border-block-width: 1px;
		border-block-style: solid;
		border-block-color: var(--wp--preset--color--primary);
		border-inline-width: 1px;
		border-inline-style: solid;
		border-inline-color: var(--wp--preset--color--primary);
		border-radius: var(--wp--preset--border-radius--full);

		li {
			display: flex;

			& + li {
				border-block-start-width: 1px;
				border-block-start-style: solid;
				border-block-start-color: var(--wp--preset--color--primary);
			}
		}

		a {
			display: inline-flex;
			flex: 1;
			align-items: center;
			justify-content: center;
			gap: 0.35rem;
			padding-block: 0.55rem;
			padding-inline: 0.85rem;
			color: var(--wp--preset--color--primary);
			font-family: var(--wp--preset--font-family--google-sans);
			font-size: var(--wp--preset--font-size--small);
			font-weight: 500;
			letter-spacing: 0.08em;
			line-height: 1;
			text-decoration: none;
			transition-property: background-color, color;
			transition-duration: 0.2s, 0.2s;
			transition-timing-function: ease, ease;

			&::before {
				content: "";
				inline-size: 1rem;
				block-size: 1rem;
				flex: none;
				background-color: currentColor;
				mask-image: var(--pxlm-language-icon);
				mask-repeat: no-repeat;
				mask-position: center;
				mask-size: contain;
				-webkit-mask-image: var(--pxlm-language-icon);
				-webkit-mask-repeat: no-repeat;
				-webkit-mask-position: center;
				-webkit-mask-size: contain;
			}

			&:focus-visible {
				outline: 3px solid var(--wp--preset--color--primary);
				outline-offset: 2px;
			}

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

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

			@media (prefers-reduced-motion: reduce) {
				transition-property: none;
			}
		}

		li:first-child a {
			--pxlm-language-icon: url("../../icons/alphabet-japanese.svg");
			border-start-start-radius: var(--wp--preset--border-radius--full);
			border-start-end-radius: var(--wp--preset--border-radius--full);
		}

		li:nth-child(2) a {
			--pxlm-language-icon: url("../../icons/language-circle.svg");
			border-end-start-radius: var(--wp--preset--border-radius--full);
			border-end-end-radius: var(--wp--preset--border-radius--full);
		}
	}
}