.ub_icons_library_modal {
	.components-modal__content {
		overflow: hidden;
		padding: 0 0px 32px 32px !important;

		.ub_icons_library {
			display: grid;
			grid-gap: 15px;
			grid-template-columns: 1fr 4fr;
			margin-top: 3px;
			.ub_icon_library_content_wrapper {
				overflow: auto;
				max-height: calc(90vh - 100px);
				text-align: center;
				padding-bottom: 15px;
				.ub_icon_library_content {
					&:not(.no-results) {
						display: grid;
						padding-right: 15px;
						padding-bottom: 10px;
						grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
					}

					.ub_icon_library_item {
						display: flex;
						justify-content: center;
						align-items: center;
						height: 70px;
						flex-direction: column;
						svg {
							width: 24px;
						}
						&:focus {
							border: 1px solid #000;
						}

						&:hover {
							border: 1px solid #000;
						}
					}
				}
			}

			.ub_icons_library_sidebar {
				position: sticky;
				top: 0;

				.ub_icons_library_sidebar_item_group {
					overflow-y: auto;
					padding: 10px;
					max-height: calc(90vh - 155px);

					.ub_icons_library_sidebar_item > .components-menu-item__item {
						width: 100%;
						display: flex;
						flex-direction: row;
						justify-content: space-between;
					}
				}
			}
		}
	}

	/**Media query***/

	$small: 600px;

	@media (max-width: $small) {
		.components-modal__content {
			padding: 0 32px 32px 32px !important;
			overflow: auto;
			.ub_icons_library {
				display: grid;
				grid-template-columns: repeat(1, 1fr);
				.ub_icons_library_sidebar {
					position: relative;
				}
				.ub_icon_library_content {
					max-height: 100% !important;
				}
			}
		}
	}
}
.editor-styles-wrapper {
	div.wp-block-ub-icon[id^="block-"] {
		&.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;
		}
	}
}

.wp-block-ub-icon {
	.ub_icon {
		display: flex;
		justify-content: var(--ub-icon-justification);
		svg {
			fill: var(--ub-icon-color);
			color: var(--ub-icon-color);
			width: var(--ub-icon-size, 40px);
			height: var(--ub-icon-size, 40px);
			background: var(--ub-icon-bg-color);
			transform: var(--ub-icon-rotation);
			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);
			box-sizing: content-box;
			&:hover {
				fill: var(--ub-icon-hover-color, var(--ub-icon-color));
				background: var(--ub-icon-bg-hover-color, var(--ub-icon-bg-color));
			}
		}
	}
}
.ub_custom_svg_inserter__modal {
	.components-modal__content {
		flex: 1 1 0%;
		overflow: auto;
		padding: 0px;

		&:before {
			margin-bottom: 0;
		}
	}

	.ub_custom_svg_inserter {
		align-items: stretch;
		display: flex;
		flex-direction: column;
		gap: 32px;
		height: 100%;
		padding: 0 32px 32px;

		@media (min-width: 900px) {
			flex-direction: row;
		}
	}

	.ub_custom_svg_inserter__content {
		min-height: 400px;

		@media (min-width: 900px) {
			width: calc(100% - 400px);
		}

		.components-base-control,
		.components-base-control__field,
		.components-textarea-control__input {
			height: 100%;
		}

		textarea {
			resize: none;
		}
	}

	.ub_custom_svg_inserter__sidebar {
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		@media (min-width: 900px) {
			width: 400px;
		}

		.icon-preview__window {
			border: 1px solid #ddd;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20px;
			min-height: 250px;
			max-height: 400px;
			overflow: scroll;

			&.is-default {
				svg {
					opacity: 0.3;
				}
			}

			svg {
				width: 100%;
				height: 100%;
			}
		}

		.ub_icon_controls {
			display: flex;
			justify-content: center;
			padding: 12px 24px;
		}

		.ub_icon_controls__size {
			display: flex;
			align-items: center;

			& > span {
				margin-bottom: 6px;
				margin-right: 16px;
			}

			.components-range-control {
				width: 90px;

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

		.icon-insert-buttons {
			display: flex;
			justify-content: space-between;
		}
	}
}