.fraud-protection {
	&-advanced-settings {
		&-layout {
			margin: 0 auto;
			max-width: 680px;
			width: 100%;

			.is-loadable-placeholder.is-block {
				margin-top: 2em;
			}
		}
		&-error-notice .components-notice {
			filter: drop-shadow( 0 2px 6px rgba( 0, 0, 0, 0.05 ) );
			margin: 0 0 24px;
			background: #fff;
			padding: 12px 16px 16px 16px;
			.components-notice__content {
				margin: 0;
				font-size: 13px;
				line-height: 19.5px;
			}
			svg {
				width: 16px;
				height: 16px;
				stroke: #000;
			}
			button.components-notice__dismiss {
				min-width: auto;
				height: 24px;
				width: 24px;
				padding: 0;
			}
		}

		&__footer {
			display: flex;
			justify-content: flex-end;

			> .components-button + .components-button {
				margin-left: 24px;
			}
		}
	}
	&-header-breadcrumb {
		margin-top: 0;
		margin-bottom: 8px;
		@media screen and ( min-width: 961px ) {
			margin-top: -16px;
		}
		@media screen and ( max-width: 782px ) {
			margin-top: -36px;
		}
	}
	&-header-save-button {
		margin-right: 8px;
	}

	&-radio-wrapper {
		display: flex;
		align-items: center;
		height: 20px;
		margin-bottom: 4px;
		&__item {
			display: inline-block;
			margin: 0 5px 0 0;
		}
	}

	&__list-divider {
		margin: 0 0 16px 0;
	}

	&__advanced-level-container {
		align-items: center;
		display: flex;
		flex-direction: row;
		label {
			flex: 1;
		}
		p.fraud-protection__text--help-text {
			margin-bottom: 0;
		}
	}

	ul {
		margin-top: 0;
		& > li {
			margin-bottom: 16px;
		}
	}

	input[type='radio'] {
		margin: 0 10px 0 0;
		width: 20px;
		height: 20px;
		border-color: #757575;
		&:checked {
			background-color: #fff;
			border-color: #757575;
			&::before {
				content: '';
				border-radius: 50%;
				width: 12px;
				height: 12px;
				margin: 3px;
				background-color: var(
					--wp-components-color-accent,
					var( --wp-admin-theme-color, #3858e9 )
				);
				line-height: 1.14285714;
			}
		}
	}

	&__text--help-text {
		font-size: 12px;
		color: #757575;
		margin: 0 0 0 30px;
		display: inline-block;
	}

	&-rule-description {
		margin-bottom: 24px;
		strong {
			font-size: 13px;
			font-weight: 600;
			line-height: 16px;
			color: #1e1e1e;
			margin: 0;
			margin-bottom: 8px;
			display: block;
		}
		p:last-child {
			font-size: 13px;
			font-weight: 400;
			line-height: 16px;
			margin: 0;
			color: #757575;
		}
	}

	&-rule-toggle {
		margin-bottom: 24px;
		strong {
			font-size: 13px;
			font-weight: 600;
			line-height: 16px;
			color: #1e1e1e;
			display: block;
		}

		&-toggle {
			margin-bottom: 24px;

			label {
				padding-left: 8px;
				line-height: 21px;
				font-size: 13px;
				color: #1d2327;
			}

			.components-base-control__field {
				align-items: center;
				display: flex;
			}

			.components-base-control__help {
				line-height: 16px;
			}
		}

		strong,
		&-toggle > div {
			margin: 0 0 12px;
		}

		&-block {
			margin-bottom: 24px;

			.components-base-control__field {
				margin-bottom: 0;

				& > .components-radio-control__option {
					margin-bottom: 12px;

					&:last-child {
						margin-bottom: 0;
					}

					input[type='radio'] {
						border-color: #757575;

						&:checked {
							background-color: #fff;
							border-color: #757575;

							&::before {
								border: 6px solid #3582c4;
								width: 12px;
								height: 12px;
								transform: translate( 3px, 3px );
							}
						}
					}
				}
			}
		}

		&-children {
			&-container {
				margin-bottom: 24px;

				.components-base-control__help {
					margin-bottom: 0;
				}
			}
			&-horizontal-form {
				display: flex;
				flex-direction: row;
				gap: $gap-small;
				max-width: 492px;
			}
			&-vertical-form {
				display: flex;
				flex: 1;
				flex-direction: column;
				gap: $gap-smaller;
			}
		}
	}

	&-rule-card {
		&-header-container {
			padding: 16px 24px;
		}
		&-header {
			margin: 0 0 4px 0;
			font-size: 20px;
			line-height: 28px;
			font-weight: 400;
			color: #1e1e1e;
		}
		&-description {
			margin: 0;
			font-size: 14px;
			line-height: 18px;
			font-weight: 400;
			color: #757575;
		}
		hr {
			margin: 0;
			border-bottom: 1px solid #e0e0e0;
			border-top: 0;
		}
	}

	&__help-icon {
		fill: var(
			--wp-components-color-accent,
			var( --wp-admin-theme-color, #007cba )
		);
		cursor: pointer;
	}
	&-advanced-settings-notice {
		margin-top: 0;
		margin-bottom: 16px;
	}
}

.components-modal__header {
	border-bottom: 1px solid #ddd;
}

.components-modal__body--fraud-protection {
	padding-top: 24px;

	ul {
		list-style-type: disc;
		margin-left: 24px;
	}
}

.component-modal__text {
	&--blocked {
		color: #b32d2e;
	}
	&--review {
		color: #996800;
	}
}

.component-modal__button {
	&--confirm {
		display: block;
		margin-left: auto;
	}
}

.component-notice--is-info {
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 1em;
	background-color: #f0f6fc;
	border-left: none;
}

.component-notice__icon {
	margin-right: 10px;
	align-self: center;
}

.component-notice__content--flex {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}

#fraud-protection-welcome-tour-first-step {
	bottom: 26px;
	left: 207px;
	position: absolute;
}

.tour-kit-frame__arrow[data-hide]::before {
	visibility: hidden;
}
