turbo-frame {
    &[complete] {
        /**
         * Default content (e.g. a spinner icon) gets rendered again after a turbo frame rerenders
         * Just hide it with css if the wrapping element has attribute "complete"
         */
        .turbo-frame-hide-on-complete {
            display: none;
        }
    }
    &[aria-busy="true"] .blur-if-loading {
        filter: blur(3px);
    }
}
/** The data-controller attribute can have multiple controllers separated with space */
[data-controller*=" live "],
[data-controller^="live "],
[data-controller$=" live"],
[data-controller="live"] {
    /**
     * When an action is performed, the "busy" attribute gets added
     * Warning: In the future this might be changed to aria-busy
     */
    &[busy].busy-wait-overlay {
        pointer-events: none;
        cursor: wait;
        &:after {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, .5);
            pointer-events: auto;
            cursor: wait;
        }
    }
}