.action-fab {
    pointer-events: none;
    position: fixed;
    inset-inline-end: calc(0.25rem * 4);
    bottom: calc(0.25rem * 14);
    z-index: 999;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: calc(0.25rem * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;

    >* {
        pointer-events: auto;
        display: flex;
        align-items: center;
        gap: calc(0.25rem * 2);

        &:hover,
        &:has(:focus-visible) {
            z-index: 1;
        }
    }

    >[tabindex] {
        &:first-child {
            position: relative;
            display: grid;
            transition-property: opacity, visibility, rotate;
            transition-duration: 0.2s;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        }
    }

    .fab-close {
        position: absolute;
        inset-inline-end: calc(0.25rem * 0);
        bottom: calc(0.25rem * 0);
    }

    .fab-main-action {
        position: absolute;
        inset-inline-end: calc(0.25rem * 0);
        bottom: calc(0.25rem * 0);
    }

    &:focus-within {

        &:has(.fab-close),
        &:has(.fab-main-action) {
            >[tabindex] {
                rotate: 90deg;
                opacity: 0%;
            }
        }

        >[tabindex]:first-child {
            pointer-events: none;
        }

        > :nth-child(n + 2) {
            visibility: visible;
            --tw-scale-x: 100%;
            --tw-scale-y: 100%;
            --tw-scale-z: 100%;
            scale: var(--tw-scale-x) var(--tw-scale-y);
            opacity: 100%;
        }
    }

    > :nth-child(n + 2) {
        visibility: hidden;
        --tw-scale-x: 80%;
        --tw-scale-y: 80%;
        --tw-scale-z: 80%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
        opacity: 0%;
        transition-property: opacity, scale, visibility;
        transition-duration: 0.2s;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

        &.fab-main-action,
        &.fab-close {
            --tw-scale-x: 100%;
            --tw-scale-y: 100%;
            --tw-scale-z: 100%;
            scale: var(--tw-scale-x) var(--tw-scale-y);
        }
    }

        > :nth-child(3) {
            transition-delay: 30ms;
        }
    
        > :nth-child(4) {
            transition-delay: 60ms;
        }
    
        > :nth-child(5) {
            transition-delay: 90ms;
        }
    
        > :nth-child(6) {
            transition-delay: 120ms;
        }
    
        > :nth-child(7) {
            transition-delay: 150ms;
        }
    
        > :nth-child(8) {
            transition-delay: 180ms;
        }
    
        > :nth-child(9) {
            transition-delay: 210ms;
        }
    
        > :nth-child(10) {
            transition-delay: 240ms;
        }
    
        > :nth-child(11) {
            transition-delay: 270ms;
        }
    
        > :nth-child(12) {
            transition-delay: 300ms;
        }
    
        > :nth-child(13) {
            transition-delay: 330ms;
        }
    
        > :nth-child(14) {
            transition-delay: 360ms;
        }
    
        > :nth-child(15) {
            transition-delay: 390ms;
        }
    
        > :nth-child(16) {
            display: none;
        }
}