$inline-editor: $prefix + 'inline-editor';

.#{$inline-editor} {
    a {
        pointer-events: none;
    }

    [data-inline-editable] {
        border: 1px dashed transparent;
        transition: all 0.3s ease;
    }

    [data-inline-editable]:hover {
        border: 1px dashed #154EF250;
    }

    [data-inline-editable]:focus {
        border: 1px dashed #154EF2;
        outline: none;
    }

    // Styles of backdrop
    .#{$inline-editor}-dirty &-content::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: #00000020;
        transition: all 0.3s ease;

        opacity: 1;
        pointer-events: none;
    }

    &-actions {
        display: flex;
        gap: 4px;
        position: absolute;
        top: 6px;
        opacity: 0;
        pointer-events: none;
        transition: all 0.3s ease;
        right: 70px;
    }

    &-action-save {
        border-radius: 3px;
        color: white;
        background-color: #154EF2;
        font-size: 12px;
        padding: 2px 10px;
    }

    &-action-save:hover {
        background-color: #1444d3;
    }

    &-action-cancel {
        font-size: 12px;
        color: #6B7280;
        padding: 2px 10px;
    }

    &-action-cancel:hover {
        color: #52565e;
    }

    &-action-message {
        color: #154EF2;
        font-size: 12px;
        font-weight: bold;
    }

}

.f-plugin-container:hover .#{$inline-editor}-dirty .#{$inline-editor}-content::after {
    opacity: 0;
}

.#{$inline-editor}-dirty .#{$inline-editor}-actions {
    opacity: 1;
    pointer-events: all;
}