.wp-block-list {
	&.is-style-default,
	&:not([class*="is-style-"]) {
		margin: 15px auto 15px auto;
		padding-left: 1.3rem;
		list-style: disc;
	}

	&.is-style-worry {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding-inline-start: 0;
		gap: var(--wp--preset--spacing--20);
		width: 100%;

		li {
			align-items: center;
			padding: 0.5rem 1rem;
			list-style: none;
			background-color: var(--wp--preset--color--white);
			border: 3px solid var(--wp--preset--color--alto-03);
			z-index: 1;
			transition: 0.2s ease scale;
			border-radius: 100vw;

			strong {
				font-size: 1.1em;
			}

			ion-icon {
				display: none;
				margin-inline-end: 0.3rem;
			}

			&.active {
				z-index: 2;
				scale: 1.1;
				color: var(--wp--preset--color--light-01);
				border: 3px solid var(--wp--preset--color--primary);
				background-color: var(--wp--preset--color--primary);
				ion-icon {
					display: inline-flex;
				}

				ion-icon {
					color: var(--wp--preset--color--light-01);
				}
			}
		}
	}

	&.is-style-pagelist {
		max-width: 50%;
		padding: 0;
		list-style: none;

		@media (width <= 768px) {
			max-width: calc(100vw - 2rem);
			list-style: none;
		}

		.page_item {
			a {
				position: relative;
				display: flex;
				align-items: center;
				padding: 1rem 2rem;
				overflow: hidden;
				color: var(--wp--preset--color--dark-01);
				font-size: var(--font-size-lg);
				line-height: 1;
				text-decoration: none;
				border: 1px solid var(--wp--preset--color--alto-03);
				border-radius: 45px;
				transition: 0.3s ease;

				&::before {
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					z-index: -1;
					background-color: var(--wp--preset--color--alto-10);
					transform: scale(0, 1);
					transform-origin: right top;
					transition: transform 0.7s;
					content: "";
				}

				&::after {
					position: absolute;
					right: 1rem;
					align-items: center;
					font-weight: 600;
					font-family: var(--font-family-ionicons);
					content: "";
				}

				&:hover {
					color: var(--wp--preset--color--primary);

					&::before {
						transform: scale(1, 1);
						transform-origin: left top;
					}
				}
			}

			.children {
				max-width: 90%;
				margin-block-start: 1rem;
				margin-inline-end: 0;
				margin-inline-start: auto;
				padding: 0;
				list-style: none;
			}

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

	&.is-style-decorate {
		max-width: max-content;
		margin-inline-start: 0;
		padding-left: 0;
		list-style: none;

		li {
			position: relative;
			padding-top: 0.5rem;
			padding-right: 1rem;
			padding-bottom: 0.5rem;
			padding-left: 2.3rem;
			list-style: none;
			background-color: #f5f5f5;

			&::before {
				position: absolute;
				top: 1.2rem;
				left: 1rem;
				display: inline-block;
				width: 6px;
				height: 6px;
				vertical-align: middle;
				background: linear-gradient(90deg, #f93 20%, #ff7166 80%);
				background-repeat: no-repeat;
				background-position: center;
				background-size: cover;
				border-radius: 50px;
				content: "";
			}

			+ li {
				border-top: 1px solid var(--wp--preset--color--light-01);
			}
		}
		@media (width <= 768px) {
			max-width: calc(100vw - 2rem);
			margin: 0.5rem auto 3rem auto;
		}
	}

	&.is-style-flow {
		@media (width <= 768px) {
			grid-template-columns: 1fr;
			gap: 1rem 0;
			max-width: calc(100vw - 2rem);
		}
		display: grid;
		grid-template-columns: auto auto auto auto auto auto auto;
		gap: 0 1rem;
		max-width: 960px;
		margin-inline-end: auto;
		margin-block-end: 0;
		margin-inline-start: auto;
		padding: 0;
		list-style: none;
		counter-reset: step;

		li {
			display: flex;
			align-items: center;
			justify-content: center;
			color: var(--wp--preset--color--dark-01);
			font-weight: 500;
			font-size: 1rem;
			text-align: center;
			border: 2px solid var(--wp--preset--color--dark-01);
			transition: 0.3s ease;

			&:hover {
				opacity: 0.5;
			}

			a {
				position: relative;
				display: block;
				width: 100%;
				padding: 0.8rem;
				color: var(--wp--preset--color--dark-01);
				text-decoration: none;

				&::before {
					display: block;
					margin-block-end: 0.5rem;
					color: var(--wp--preset--color--light-01);
					font-size: 0.8rem;
					background-color: var(--wp--preset--color--dark-01);
					content: "STEP " counter(step);
					counter-increment: step;
				}
			}

			+ li {
				position: relative;

				&::before {
					@media (width <= 768px) {
						top: -18px;
						right: 0;
						left: 0;
						width: 2px;
						height: 2rem;
						margin: 0 auto;
					}
					position: absolute;
					left: -18px;
					width: 2rem;
					height: 2px;
					background-color: var(--wp--preset--color--dark-01);
					content: "";
				}
			}

			&:nth-of-type(1) {
				background-color: lighten(variables.$color-secondary, 40%);
			}

			&:nth-of-type(2) {
				background-color: lighten(adjust-hue(variables.$color-secondary, -10deg), 40%);
			}

			&:nth-of-type(3) {
				background-color: lighten(adjust-hue(variables.$color-secondary, -15deg), 40%);
			}

			&:nth-of-type(4) {
				background-color: lighten(adjust-hue(variables.$color-secondary, -20deg), 40%);
			}

			&:nth-of-type(5) {
				background-color: lighten(adjust-hue(variables.$color-secondary, -30deg), 40%);
			}

			&:nth-of-type(6) {
				background-color: lighten(adjust-hue(variables.$color-secondary, -40deg), 40%);
			}

			&:nth-of-type(7) {
				background-color: lighten(adjust-hue(variables.$color-secondary, -50deg), 40%);
			}
		}
	}
}