.op3-element-options-border-radius-wrapper {
    display: flex;
    flex-direction: column;
    padding: 22px;

    .op3-element-options-corner-boxes {
        position: relative;
        width: 60px;
        height: 60px;
    }

    // borders
    [data-property-link] {
        position: absolute;
        width: 20px;
        height: 20px;
        border: 1px dotted darken($op-grey-border, 10%);
        cursor: pointer;
        transition: all 0.1s ease;
    }

    [data-property-link="topLeft"] {
        border-top: 2px solid $op-light-grey;
        border-left: 2px solid $op-light-grey;
        border-top-left-radius: 50%;
        top: 0;
        left: 0;
    }

    [data-property-link="topRight"] {
        border-top: 2px solid $op-light-grey;
        border-right: 2px solid $op-light-grey;
        border-top-right-radius: 50%;
        top: 0;
        right: 0;
    }

    [data-property-link="bottomRight"] {
        border-right: 2px solid $op-light-grey;
        border-bottom: 2px solid $op-light-grey;
        border-bottom-right-radius: 50%;
        right: 0;
        bottom: 0;
    }

    [data-property-link="bottomLeft"] {
        border-bottom: 2px solid $op-light-grey;
        border-left: 2px solid $op-light-grey;
        border-bottom-left-radius: 50%;
        left: 0;
        bottom: 0;
    }

    [data-property-link="all"] {
        width: 18px;
        height: 18px;
        border: 2px solid $op-light-grey;
        border-radius: 5px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    // active borders
    &[data-property-link-active="topLeft"] [data-property-link="topLeft"],
    [data-property-link="topLeft"]:hover {
        border-top: 4px solid $op-blue;
        border-left: 4px solid $op-blue;
    }

    &[data-property-link-active="topRight"] [data-property-link="topRight"],
    [data-property-link="topRight"]:hover {
            border-top: 4px solid $op-blue;
            border-right: 4px solid $op-blue;
        }

    &[data-property-link-active="bottomRight"] [data-property-link="bottomRight"],
    [data-property-link="bottomRight"]:hover {
        border-right: 4px solid $op-blue;
        border-bottom: 4px solid $op-blue;
    }

    &[data-property-link-active="bottomLeft"] [data-property-link="bottomLeft"],
    [data-property-link="bottomLeft"]:hover {
        border-bottom: 4px solid $op-blue;
        border-left: 4px solid $op-blue;
    }

    &[data-property-link-active="all"] [data-property-link="all"],
    [data-property-link="all"]:hover {
        border: 4px solid $op-blue;
    }

    // display property by active border
    & ~ .op3-element-options-property[data-op3-element-options-property-name="borderTopLeftRadius"],
    & ~ .op3-element-options-property[data-op3-element-options-property-name="borderTopRightRadius"],
    & ~ .op3-element-options-property[data-op3-element-options-property-name="borderBottomRightRadius"],
    & ~ .op3-element-options-property[data-op3-element-options-property-name="borderBottomLeftRadius"] {
        display: none;
    }

    &[data-property-link-active="all"] ~ .op3-element-options-property[data-op3-element-options-property-name="borderTopLeftRadius"],
    &[data-property-link-active="topLeft"] ~ .op3-element-options-property[data-op3-element-options-property-name="borderTopLeftRadius"],
    &[data-property-link-active="topRight"] ~  .op3-element-options-property[data-op3-element-options-property-name="borderTopRightRadius"],
    &[data-property-link-active="bottomRight"] ~ .op3-element-options-property[data-op3-element-options-property-name="borderBottomRightRadius"],
    &[data-property-link-active="bottomLeft"] ~ .op3-element-options-property[data-op3-element-options-property-name="borderBottomLeftRadius"] {
        position: absolute;
        right: 46px;
        display: flex;
        width: 168px;
        margin-top: -68px;
        padding: 0;

        #toolbar & {
            right: 22px;
            margin-top: -46px;
        }

        &::before {
            display: none;
        }

        .op3-element-options-label-group {
            display: none;
        }

        .jquery-input-range-widget {
            margin-top: -22px;
            padding-top: 22px;

            .jquery-input-range-numeric {
                width: 60px;
                height: 30px;
                padding-top: 0;
                padding-bottom: 0;
            }
        }
    }
}