// Padding adjust handles...
.op3-element {
    .jquery-paddingdrag-widget {
        display: none;
        font-family: $op-font-family;
        transition: opacity 0.4s ease;
    }

    // Default case, when drag is initialized on the op3 element
    &.op3-focus.jquery-paddingdrag > .jquery-paddingdrag-widget {
        display: block;
    }

    // When drag is initialized on a target div (using property selector)
    // 1. we show ALL padding handles
    &.op3-focus .jquery-paddingdrag > .jquery-paddingdrag-widget {
        display: block;
    }

    // 2. we hide ALL padding handles that are in nested elements
    &.op3-focus .op3-element.jquery-paddingdrag > .jquery-paddingdrag-widget,
    &.op3-focus .op3-element .jquery-paddingdrag > .jquery-paddingdrag-widget {
        display: none;
    }
}