@import "../settings/_mixins";
@import "../settings/_variables";

.dnetor-image-marker {
    position: relative;
    display: inline-block;

    .dnetor-point-item {
        position: absolute;
        @include d-flex();
        @include align-items-center();
        @include justify-content-center();
        cursor: pointer;
    }

    .dnetor-point-icon {
        font-size: 30px;
        color: $accent_color;
        @include d-flex();
        @include align-items-center();
        @include justify-content-center();
        .dnetor-icon {
            @include d-flex();
            @include align-items-center();
            @include justify-content-center();
        }
        svg {
            display: inline-block;
            width: 1em;
            height: 1em;
            stroke: currentColor;
            fill: currentColor;
        }
    }

    .dnetor-point-tooltip {
        position: absolute;
        display: inline-block;
        cursor: pointer;
        visibility: visible;
        opacity: 0;
        background-color: $primary_color;
        border-radius: 5px;
        padding: 10px 15px;
        width: 180px;
        z-index: 1;
        bottom: 130%;
        left: 50%;
        @include transform(translate(-50%,-20px));
        &.open{
            @include transition(all .5s);
            @include transform(translate(-50%,0));
            visibility: unset;
            opacity: 1;
        }
        &:before{
            content: '';
            @include transform(translateX(-50%));
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-top: 8px solid $primary_color;
            display: block;
            position: absolute;
            top: 100%;
            left: 50%;
        }
        .dnetor-point-top{
            @include d-flex();
            @include align-items-center();
        }
        .image{
            margin-right: 5px;
        }
        .title{
            color: #fff;
            font-size: 20px;
            margin-bottom: 0;
            margin-top: 0;
        }
        .des{
            color: #fff;
            font-size: 14px;
            margin-bottom: 0;
            margin-top: 5px;
        }
    }
}