.responsive_block_addons___dot{
	&.is-selected.is-dragging{
		display:block !important;
	}
}

.image-hotspot-toolbar-icons {
	color: #ff6f61;
}

.image-hotspot-toolbar-icons .dashicons-format-image {
	color: #ff6f61;
	margin-right: 1rem;
	height: 18px;
	width: 18px;
}

.responsive_block_addons-hotspot-media-placeholder {
	background: #fffffc!important;
	border: 1px solid #5b5bff;
}

.responsive_block_addons-hotspot-media-placeholder .components-placeholder__fieldset {
	margin-top: 1.8rem;
}

.wp-block-responsive-block-editor-addons-image-hotspot__modal {
	.responsive-block-editor-addons-modal-editor-tabs {
		width: 450px;
	}
	.components-tab-panel__tabs {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		column-gap: 5px;
		margin-bottom: 1rem;

		button.is-active {
			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 -4px 0 0 #ff6f61;
			border: 1px solid #ffdedb;
		}

		.components-tab-panel__tabs-item {
			border: 1px solid #eceaea;
		}
	}

	.components-button-group {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 20px;
		margin-top: 20px;

		button {
		 	&.is-primary {
				background-color: #ff6f61;
				box-shadow: inset 0 0 0 1px #fd5a4b;
				justify-content: center;
				&:hover {
					background-color: #ff6f61;
				}
			}
			&.is-secondary {
    			box-shadow: inset 0 0 0 1px #ff6f61;
				color: #ff6f61;
				justify-content: center;
				&:hover {
					color: #ff6f61;
					box-shadow: inset 0 0 0 1px #ff6f61;
				}
			}
		}
	}

	.components-tab-panel__tab-content {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		height: 75%;
		gap: 20px;

		.responsive_block_addons___url-field {
			display: flex;
			flex-direction: column;
			gap: 20px;
		}
	}
}