.wp-block-ub-icon {
	&.has-ub-icon-padding {
		.ub_icon svg {
			padding-top: var(--ub-icon-padding-top, 0px) !important;
			padding-right: var(--ub-icon-padding-right, 0px) !important;
			padding-bottom: var(--ub-icon-padding-bottom, 0px) !important;
			padding-left: var(--ub-icon-padding-left, 0px) !important;
		}
	}
	&.has-ub-icon-margin {
		margin-top: var(--ub-icon-margin-top) !important;
		margin-right: var(--ub-icon-margin-right) !important;
		margin-bottom: var(--ub-icon-margin-bottom) !important;
		margin-left: var(--ub-icon-margin-left) !important;
	}
	&.is-style-square-outline {
		.ub_icon {
			svg {
				fill: var(--ub-icon-color, #000000);
				color: var(--ub-icon-color, #000000);
				background: transparent;
				border-top-right-radius: var(--ub-icon-top-right-radius, 0px);
				border-top-left-radius: var(--ub-icon-top-left-radius, 0px);
				border-bottom-left-radius: var(--ub-icon-bottom-left-radius, 0px);
				border-bottom-right-radius: var(--ub-icon-bottom-right-radius, 0px);
				border-left: var(
					--ub-icon-border-left,
					3px solid var(--ub-icon-color, #000000)
				);
				border-right: var(
					--ub-icon-border-right,
					3px solid var(--ub-icon-color, #000000)
				);
				border-top: var(
					--ub-icon-border-top,
					3px solid var(--ub-icon-color, #000000)
				);
				border-bottom: var(
					--ub-icon-border-bottom,
					3px solid var(--ub-icon-color, #000000)
				);
				&:hover {
					fill: var(--ub-icon-hover-color, var(--ub-icon-color, #000000));
					background: transparent;
					border-left: var(
						--ub-icon-border-left,
						3px solid var(--ub-icon-hover-color, var(--ub-icon-color, #000000))
					);
					border-right: var(
						--ub-icon-border-right,
						3px solid var(--ub-icon-hover-color, var(--ub-icon-color, #000000))
					);
					border-top: var(
						--ub-icon-border-top,
						3px solid var(--ub-icon-hover-color, var(--ub-icon-color, #000000))
					);
					border-bottom: var(
						--ub-icon-border-bottom,
						3px solid var(--ub-icon-hover-color, var(--ub-icon-color, #000000))
					);
				}
			}
		}
	}
	&.is-style-square-fill {
		.ub_icon {
			svg {
				fill: var(--ub-icon-color, #ffffff);
				color: var(--ub-icon-color, #ffffff);
				background: var(--ub-icon-bg-color, #000000);
				border-top-right-radius: var(--ub-icon-top-right-radius, 0px);
				border-top-left-radius: var(--ub-icon-top-left-radius, 0px);
				border-bottom-left-radius: var(--ub-icon-bottom-left-radius, 0px);
				border-bottom-right-radius: var(--ub-icon-bottom-right-radius, 0px);
				border-left: var(--ub-icon-border-left);
				border-right: var(--ub-icon-border-right);
				border-top: var(--ub-icon-border-top);
				border-bottom: var(--ub-icon-border-bottom);
				&:hover {
					fill: var(--ub-icon-hover-color, var(--ub-icon-color, #ffffff));
					background: var(
						--ub-icon-bg-hover-color,
						var(--ub-icon-bg-color, #000000)
					);
				}
			}
		}
	}
	&.is-style-circle-outline {
		.ub_icon {
			svg {
				fill: var(--ub-icon-color, #000000);
				color: var(--ub-icon-color, #000000);
				background: transparent;
				border-top-right-radius: var(--ub-icon-top-right-radius, 999px);
				border-top-left-radius: var(--ub-icon-top-left-radius, 999px);
				border-bottom-left-radius: var(--ub-icon-bottom-left-radius, 999px);
				border-bottom-right-radius: var(--ub-icon-bottom-right-radius, 999px);
				border-left: var(
					--ub-icon-border-left,
					3px solid var(--ub-icon-color, #000000)
				);
				border-right: var(
					--ub-icon-border-right,
					3px solid var(--ub-icon-color, #000000)
				);
				border-top: var(
					--ub-icon-border-top,
					3px solid var(--ub-icon-color, #000000)
				);
				border-bottom: var(
					--ub-icon-border-bottom,
					3px solid var(--ub-icon-color, #000000)
				);
				&:hover {
					fill: var(--ub-icon-hover-color, var(--ub-icon-color, #000000));
					background: transparent;
					border-left: var(
						--ub-icon-border-left,
						3px solid var(--ub-icon-hover-color, var(--ub-icon-color, #000000))
					);
					border-right: var(
						--ub-icon-border-right,
						3px solid var(--ub-icon-hover-color, var(--ub-icon-color, #000000))
					);
					border-top: var(
						--ub-icon-border-top,
						3px solid var(--ub-icon-hover-color, var(--ub-icon-color, #000000))
					);
					border-bottom: var(
						--ub-icon-border-bottom,
						3px solid var(--ub-icon-hover-color, var(--ub-icon-color, #000000))
					);
				}
			}
		}
	}
	&.is-style-circle-fill {
		.ub_icon {
			svg {
				fill: var(--ub-icon-color, #ffffff);
				color: var(--ub-icon-color, #ffffff);
				background: var(--ub-icon-bg-color, #000000);
				border-top-right-radius: var(--ub-icon-top-right-radius, 999px);
				border-top-left-radius: var(--ub-icon-top-left-radius, 999px);
				border-bottom-left-radius: var(--ub-icon-bottom-left-radius, 999px);
				border-bottom-right-radius: var(--ub-icon-bottom-right-radius, 999px);
				border-left: var(--ub-icon-border-left);
				border-right: var(--ub-icon-border-right);
				border-top: var(--ub-icon-border-top);
				border-bottom: var(--ub-icon-border-bottom);
				&:hover {
					fill: var(--ub-icon-hover-color, var(--ub-icon-color, #ffffff));
					background: var(
						--ub-icon-bg-hover-color,
						var(--ub-icon-bg-color, #000000)
					);
				}
			}
		}
	}
	&:not(.is-style-circle-fill):not(.is-style-circle-outline):not(
			.is-style-square-outline
		):not(.is-style-square-fill) {
		.ub_icon {
			svg {
				fill: var(--ub-icon-color);
				color: var(--ub-icon-color);
				background: var(--ub-icon-bg-color);
				border-top-right-radius: var(--ub-icon-top-right-radius);
				border-top-left-radius: var(--ub-icon-top-left-radius);
				border-bottom-left-radius: var(--ub-icon-bottom-left-radius);
				border-bottom-right-radius: var(--ub-icon-bottom-right-radius);
				border-left: var(--ub-icon-border-left);
				border-right: var(--ub-icon-border-right);
				border-top: var(--ub-icon-border-top);
				border-bottom: var(--ub-icon-border-bottom);
				&:hover {
					fill: var(--ub-icon-hover-color, var(--ub-icon-color));
					background: var(--ub-icon-bg-hover-color, var(--ub-icon-bg-color));
				}
			}
		}
	}
	.ub_icon {
		display: flex;
		justify-content: var(--ub-icon-justification);
		svg {
			width: var(--ub-icon-size, 40px);
			height: var(--ub-icon-size, 40px);
			transform: var(--ub-icon-rotation);
			box-sizing: content-box;
		}
	}
}