// These rules are specific only to this particular widget
.or-image-map-initialized {
    img {
        // avoid image flickering caused by initializing widget upon img load event
        visibility: hidden;
    }

    .option-wrapper {
        // avoid showing regular radiobuttons/checkboxes while image is loading
        display: none;
    }

    .image-map {
        svg:not([or-readonly]) {

            path[id],
            circle[id],
            g[id] {
                &:hover {
                    opacity: 0.5 !important;
                }
            }
        }
    }
}

// These rules are used in custom SVG widgets as well.
.image-map {
    svg {
        display: block;
        margin: 0 auto;
        max-width: 100%;
        width: 100vmin;
        height: auto;

        &[or-readonly] {
            opacity: 0.75 !important;
        }

        path[id],
        circle[id],
        g[id] {
            &[or-selected] {
                fill: $brand-primary-color !important;
                stroke: $brand-primary-color !important;
            }
        }
    }

    &__ui {
        height: 2em;
        width: 100%;
        text-align: center;
        font-weight: normal;

        &__tooltip {
            display: inline-block;
            background: lighten($brand-primary-color, 50%);
            padding: 2px 8px;
            color: $gray;
            border-radius: 2px;

            &:empty {
                padding: 0;
            }
        }
    }

    &__error {
        @include question-error-message;;
    }
}