/* The same four-tile fold used by CubeLoader, contained in an inline slot.
   This visual does not own busy state, masking, scroll locking or z-index. */
.wfx-cube-indicator {
    display: inline-block;
    position: relative;
    width: var(--wfx-cube-size, 24px);
    height: var(--wfx-cube-size, 24px);
    flex-shrink: 0;
    vertical-align: middle;
    pointer-events: none;
}

.wfx-cube-indicator > .wfx-cube-shape {
    position: absolute;
    /* Account for the original 45-degree rotation and 1.1 tile scale so the
       animation fits the existing button/control slot rather than expanding it. */
    inset: 17.86%;
    transform: rotateZ(45deg);
}

.wfx-cube-indicator .wfx-cube-tile {
    float: left;
    width: 50%;
    height: 50%;
    position: relative;
    transform: scale(1.1);
}

.wfx-cube-indicator .wfx-cube-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: currentColor;
    animation: wfx-fold-cube-angle 2.4s infinite linear both;
    transform-origin: 100% 100%;
}

.wfx-cube-indicator .wfx-cube-tile-2 { transform: scale(1.1) rotateZ(90deg); }
.wfx-cube-indicator .wfx-cube-tile-3 { transform: scale(1.1) rotateZ(180deg); }
.wfx-cube-indicator .wfx-cube-tile-4 { transform: scale(1.1) rotateZ(270deg); }
.wfx-cube-indicator .wfx-cube-tile-2::before { animation-delay: .3s; }
.wfx-cube-indicator .wfx-cube-tile-3::before { animation-delay: .6s; }
.wfx-cube-indicator .wfx-cube-tile-4::before { animation-delay: .9s; }

@keyframes wfx-fold-cube-angle {
    0%, 10% { transform: perspective(140px) rotateX(-180deg); opacity: 0; }
    25%, 75% { transform: perspective(140px) rotateX(0deg); opacity: 1; }
    90%, 100% { transform: perspective(140px) rotateY(180deg); opacity: 0; }
}

/* Only recognized, adapted native Syncfusion spinner visuals are concealed.
   Their nodes still own sizing, labels, accessibility and show/hide behavior. */
.e-spinner-inner.wfx-cube-adapted > svg[data-wfx-native-spinner-icon] {
    opacity: 0 !important;
}

.e-spinner-inner.wfx-cube-adapted > .wfx-cube-indicator[data-wfx-native-cube] {
    position: absolute;
    margin: 0;
    transform: translate(-50%, -50%);
}

@media (prefers-reduced-motion: reduce) {
    .wfx-cube-indicator .wfx-cube-tile::before,
    .spinner-wrapper .sk-folding-cube .sk-cube::before {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}