/* Main block container in the editor */
.wp-block-gtgroup-image-hotspots {
    background-color: var(--wp--preset--color--gt-white); /* GT White */
    min-height: 150px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-sizing: border-box;
}

/* Placeholder for missing image */
.gtgroup-hotspots-editor-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px;
    background-color: var(--wp--preset--color--gt-gray); /* GT Gray */
    border: 1px dashed var(--wp--preset--color--gt-black); /* GT Black */
    color: var(--wp--preset--color--gt-black); /* GT Black */
    text-align: center;
    padding: 20px;
}

/* Image and tooltip container in the editor */
.gtgroup-hotspots-image-container {
    position: relative;
    max-width: 100%;
    /* Add a border for visual distinction in the editor */
    border: 1px solid var(--wp--preset--color--gt-gray); /* GT Gray */
    box-sizing: border-box;
}

/* The image itself in the editor */
.gtgroup-hotspots-editor-image {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Separate tooltip in the editor */
.gtgroup-hotspot-editor-item {
    position: absolute;
    transform: translate(-50%, -50%); /* Center the pin relative to the coordinates */
    cursor: grab; /* Drag cursor */
    z-index: 10; /* Above the image */
    touch-action: none; /* Disable gestures to prevent drag conflicts */
}
.gtgroup-hotspot-editor-item:hover {
    z-index: 11; /* On hover, to be on top of others */
}
.gtgroup-hotspot-editor-item:active {
    cursor: grabbing; /* Cursor when dragging */
}

/* Pin (circle/icon) of the tooltip in the editor */
.gtgroup-hotspot-editor-pin {
    display: block;
    width: 20px;
    height: 20px;
    background-color: var(--wp--preset--color--gt-black); /* GT Black */
    border-radius: 50%;
    border: 2px solid var(--wp--preset--color--gt-white); /* GT White */
    box-shadow: 0 0 0 2px rgba(var(--wp--preset--color--gt-black-rgb),0.2); /* Предполагается --gt-black-rgb для RGBA */
    box-sizing: border-box;
}

/* Popup window for editing tooltip text */
.gtgroup-hotspot-edit-popover {
    margin-top: .5em;
}

.gtgroup-hotspot-edit-popover .components-popover__content {
    padding: 0.625rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 8rem;
}
.gtgroup-hotspot-edit-popover .components-base-control__field {
    margin-bottom: 10px;
}
.gtgroup-hotspot-edit-popover .components-base-control__field:last-child {
    margin-bottom: 0;
}