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

.dnetor-image-box {
    --dnetor-image-box-spacing: 15px;

    .dnetor-image {
        @include flex-shrink-0();
        @include d-inline-flex();
    }

    .dnetor-image-box-title {
        font-size: 24px;
        color: $primary_color;
        margin-bottom: 0;
        margin-top: 0;
    }

    .dnetor-image-box-description {
        margin-top: 16px;
    }

    a {
        &.dnetor-image-box-item {
            &:hover {
                cursor: pointer;
                .dnetor-image-box-title {
                    color: $primary_color;
                }
                .dnetor-image-box-description {
                    color: $text_color;
                }
            }

            .dnetor-image-box-title {
                color: $primary_color;
            }
            .dnetor-image-box-description {
                color: $text_color;
            }
        }
    }
}

.elementor-position-top {
    .dnetor-image-box-wrapper {
        display: block;
    }
    .dnetor-image {
        width: auto;
        margin: 0 0 var(--dnetor-image-box-spacing);
    }
}

.elementor-position-left {
    .dnetor-image-box-wrapper {
        @include d-flex();
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-flow: unset;
        flex-flow: unset;
    }
    .dnetor-image {
        width: 30%;
        margin: 0 var(--dnetor-image-box-spacing) 0 0;
    }
}

.elementor-position-right {
    .dnetor-image-box-wrapper {
        @include d-flex();
        @include flex-flow-row-reverse();
    }
    .dnetor-image {
        width: 30%;
        margin: 0 0 0 var(--dnetor-image-box-spacing);
    }
}

@media (max-width: 1024px) {
    .elementor-tablet-position-top {
        .dnetor-image-box-wrapper {
            display: block;
        }
        .dnetor-image {
            width: auto;
            margin: 0 0 var(--dnetor-image-box-spacing);
        }
    }
    .elementor-tablet-position-left {
        .dnetor-image-box-wrapper {
            @include d-flex();
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-flow: unset;
            flex-flow: unset;
        }
        .dnetor-image {
            width: 30%;
            margin: 0 var(--dnetor-image-box-spacing) 0 0;
        }
    }
    .elementor-tablet-position-right {
        .dnetor-image-box-wrapper {
            @include d-flex();
            @include flex-flow-row-reverse();
        }
        .dnetor-image {
            width: 30%;
            margin: 0 0 0 var(--dnetor-image-box-spacing);
        }
    }
}

@media (max-width: 767px) {
    .elementor-mobile-position-top {
        .dnetor-image-box-wrapper {
            display: block;
        }
        .dnetor-image {
            width: auto;
            margin: 0 0 var(--dnetor-image-box-spacing);
        }
    }
    .elementor-mobile-position-left {
        .dnetor-image-box-wrapper {
            @include d-flex();
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-flow: unset;
            flex-flow: unset;
        }
        .dnetor-image {
            width: 30%;
            margin: 0 var(--dnetor-image-box-spacing) 0 0;
        }
    }
    .elementor-mobile-position-right {
        .dnetor-image-box-wrapper {
            @include d-flex();
            @include flex-flow-row-reverse();
        }
        .dnetor-image {
            width: 30%;
            margin: 0 0 0 var(--dnetor-image-box-spacing);
        }
    }
}