@mixin ywaf-icon {
	content : "\f332";
}

.column-ywaf_status {
	width : 1ch !important;

	.ywaf-risk-status {
		display         : flex;
		position        : relative;
		justify-content : center;
		align-items     : center;
		height          : 30px;
		width           : 30px;
		margin          : 0 auto;

		@mixin ywaf-risk-status {
			text-align              : center;
			display                 : block;
			font-family             : "dashicons";
			speak                   : none;
			-webkit-font-smoothing  : antialiased;
			-moz-osx-font-smoothing : grayscale;
			vertical-align          : middle;
			height                  : 100%;
			width                   : 100%;
		}

		&:before {
			position  : relative;
			font-size : 30px;
			content   : "\f334";
			@include ywaf-risk-status
		}

		&:after {
			position  : absolute;
			font-size : 15px;
			color     : #fff;
			@include ywaf-risk-status
		}

		&.high {
			color : #c83c3d;

			&:after {
				content : "\f153";
			}
		}

		&.medium {
			color : #ffa200;

			&:after {
				content : "\f534";
			}
		}

		&.low {
			color : #00a208;

			&:after {
				content : "\f12a";
			}
		}

		@mixin paypal-sign {
			-webkit-mask-image    : url("../../images/paypal.svg");
			mask-image            : url("../../images/paypal.svg");
			-webkit-mask-size     : contain;
			mask-size             : contain;
			-webkit-mask-position : center;
			mask-position         : center;
			-webkit-mask-repeat   : no-repeat;
			mask-repeat           : no-repeat;
			height                : 25px;

			&:before {
				content : "";
			}
		}

		&.paypal {
			@include paypal-sign;
			background : #ffa200;
		}

		&.paypal-failed {
			@include paypal-sign;
			background : #c83c3d;
		}
	}

	@media screen and (max-width : 782px) {
		display : none;
	}

	.ywaf-header-column {
		position                : relative;
		text-align              : center;
		display                 : block;
		font-family             : "dashicons";
		font-size               : 22px;
		speak                   : none;
		-webkit-font-smoothing  : antialiased;
		-moz-osx-font-smoothing : grayscale;
		vertical-align          : middle;

		&:after {
			@include ywaf-icon;
		}
	}
}

.column-wc_actions {
	.ywaf-check {
		&:after {
			@include ywaf-icon;
			line-height : normal !important;
			font-size   : 20px;
			color       : #000;
		}
	}
}

#ywaf-metabox {
	.inside {
		padding : 0;
		margin  : 0;

		.ywaf-risk-container {
			background     : #f8f8f8;
			display        : flex;
			flex-direction : column;

			.ywaf-rules {
				font-size   : 13px;
				line-height : 16px;
				padding     : 10px 20px;

				.ywaf-failed {
					display        : flex;
					flex-direction : column;
					gap            : 10px;

					.failed-rule {
						display        : flex;
						color          : #c83c3d;
						padding        : 0 0 0 30px;
						flex-direction : row;
						align-items    : flex-start;
						position       : relative;

						&:before {
							content       : "";
							background    : #c83c3d;
							position      : absolute;
							height        : 8px;
							width         : 8px;
							border-radius : 10px;
							z-index       : 10;
							top           : 4px;
							left          : 4px;
						}

						&:after {
							content       : "";
							background    : #c83c3d;
							position      : absolute;
							height        : 16px;
							width         : 16px;
							border-radius : 16px;
							z-index       : 1;
							opacity       : 0.2;
							top           : 0;
							left          : 0;
						}
					}
				}

				.ywaf-nocheck {
					text-align : center;
				}

				.ywaf-success {
					color : #00a208;
				}
			}

			.ywaf-risk-container-knob {
				position        : relative;
				border-bottom   : 1px solid #dfdfdf;
				background      : #fff;
				height          : 200px;
				width           : 200px;
				padding         : 39px;
				margin          : 0 auto;
				display         : flex;
				justify-content : center;
				align-items     : center;

				.label {
					position    : absolute;
					font-size   : 33px;
					font-weight : 600;
					color       : #fff;
					text-align  : center;
					line-height : normal;

					span {
						display        : block;
						font-size      : 15px;
						font-weight    : bold;
						text-transform : uppercase;
					}
				}

				.circular-progress {
					--size          : 200px;
					--half-size     : calc(var(--size) / 2);
					--stroke-width  : 25px;
					--radius        : calc((var(--size) - var(--stroke-width)) / 2);
					--circumference : calc(var(--radius) * pi * 2);
					--dash          : calc((var(--progress) * var(--circumference)) / 100);
					--high-risk     : #c83c3d;
					--medium-risk   : #ffa200;
					--low-risk      : #00a208;

					circle {
						cx           : var(--half-size);
						cy           : var(--half-size);
						r            : var(--radius);
						stroke-width : var(--stroke-width);
						fill         : none;
					}

					circle.bg {
						stroke : #b5b5b6;
					}

					circle.fg {
						transform        : rotate(-90deg);
						transform-origin : var(--half-size) var(--half-size);
						stroke-dasharray : var(--dash) calc(var(--circumference) - var(--dash));
						transition       : stroke-dasharray 0.3s linear 0s;
						stroke           : #b5b5b6;
					}

					circle.center {
						cx           : var(--half-size);
						cy           : var(--half-size);
						r            : calc(var(--size) / 3);
						stroke-width : var(--stroke-width);
						fill         : #b5b5b6;
					}

					&.high {
						circle.fg {
							stroke : var(--high-risk);
						}

						circle.center {
							fill : var(--high-risk);
						}
					}

					&.medium {
						circle.fg {
							stroke : var(--medium-risk);
						}

						circle.center {
							fill : var(--medium-risk);
						}
					}

					&.low {
						circle.fg {
							stroke : var(--low-risk);
						}

						circle.center {
							fill : var(--low-risk);
						}
					}
				}
			}

			@media only screen and (min-width : 500px) and (max-width : 850px) {
				flex-direction : row;

				.ywaf-risk-container-knob {
					border-bottom : 0 none;
					border-right  : 1px solid #dfdfdf;
				}

				.ywaf-rules {
					border-left : 1px solid #dfdfdf;
				}
			}
		}
	}
}

.ywaf-thresholds {
	width : 50px;
}

#yith-wc-anti-fraud_rules {
	& {
		padding-top : 0;
	}

	form {
		&#plugin-fw-wc {
			max-width : 920px;

			.yith-plugin-fw__panel__section {
				display : block;

				.yith-plugin-fw__panel__section__title {
					display : none;
				}

				.yith-plugin-fw__panel__section__content {
					display       : block;
					border-radius : 5px;
					box-shadow    : 0 0 0 1px var(--yith-light-border-color), 0 3px 11px 6px var(--yith-light-shadow);
					margin-top    : 0 !important;

					&.opened {
						display    : block;
						margin-top : 20px;

						.yith-plugin-fw__panel__option {
							&:not(:first-child) {
								display : block;

								.yith-plugin-fw__panel__option__label,
								.yith-plugin-fw__panel__option__content{
									margin-bottom : 8px;
								}
							}

							&.yith-plugin-fw__panel__option--onoff:first-child {
								background-color : var(--yith-table-row-highlight);

								.yith-plugin-fw__panel__option__label {
									&:before {
										content : "\f343";
									}
								}
							}
						}
					}

					.yith-plugin-fw__panel__option {
						padding       : 10px 60px;
						margin-bottom : 0;
						position      : relative;

						&:not(:first-child) {
							display   : none;
							max-width : none;

							.yith-plugin-fw__panel__option__content {
								top : 0;
							}
						}

						&.yith-plugin-fw__panel__option--onoff {
							&:first-child {
								position      : relative;
								max-width     : none;
								padding       : 20px 60px;
								margin-bottom : 0;
								cursor        : pointer;

								.yith-plugin-fw__panel__option__label {
									font-size : 15px;

									&:before {
										font-family : "Dashicons";
										content     : "\f347";
										position    : absolute;
										left        : 25px;
										top         : 20px;
										font-size   : 18px;
										cursor      : pointer;
									}

									label {
										pointer-events : none;
									}
								}
							}

							.yith-plugin-fw__panel__option__description {
								font-size : 12px;
							}

							.yith-plugin-fw__panel__option__content {
								position : absolute;
								right    : 40px;
							}
						}
					}
				}
			}
		}

		.option {
			margin-bottom : 10px;
			display       : flex;
			align-items   : center;
			gap           : 10px;;

			& > div {
				display     : flex;
				align-items : center;
				gap         : 10px;;
			}
		}

		input[type="number"] {
			width  : 100px !important;
		}
	}
}

body.ywaf-admin-single-blacklist {
	.yith-plugin-fw__panel__header-nav__wrapper {
		display : none !important;
	}
}

#tiptip_holder[data-ywaf="yes"] {
	left : 150px;

	#tiptip_arrow {
		margin-left : 25px !important;

		#tiptip_arrow_inner {
			border-bottom-color : #fff;
		}
	}

	#tiptip_content {
		--high-risk   : #c83c3d;
		--medium-risk : #ffa200;
		--low-risk    : #00a208;
		background    : #fff;
		color         : #000;
		width         : 300px;
		max-width     : 300px;
		text-align    : left;
		border-radius : 10px;
		padding       : 30px;
		box-shadow    : 0 1px 8px rgba(0, 0, 0, .2);
		font-size     : 12px;

		span {
			font-size   : 14px;
			font-weight : bold;
		}

		ul {
			list-style-type : none;

			li {
				position      : relative;
				padding       : 0 0 0 20px;
				margin-bottom : 12px;

				&:before {
					content       : "";
					background    : #50575e;
					position      : absolute;
					height        : 6px;
					width         : 6px;
					border-radius : 8px;
					z-index       : 10;
					top           : 5px;
					left          : 3px;
				}

				&:after {
					content       : "";
					background    : #50575e;
					position      : absolute;
					height        : 12px;
					width         : 12px;
					border-radius : 12px;
					z-index       : 1;
					opacity       : 0.3;
					top           : 2px;
					left          : 0;
				}
			}
		}

		&.low {
			span {
				color : var(--low-risk);
			}

			ul {
				li {
					&:before,
					&:after {
						background : var(--low-risk);
					}
				}
			}
		}

		&.medium,
		&.paypal {
			span {
				color : var(--medium-risk);
			}

			ul {
				li {
					&:before,
					&:after {
						background : var(--medium-risk);
					}
				}
			}
		}

		&.high,
		&.paypal-failed {
			span {
				color : var(--high-risk);
			}

			ul {
				li {
					&:before,
					&:after {
						background : var(--high-risk);
					}
				}
			}
		}
	}
}