.sp-universalfront {

    $root: &;

    display: inline-block;
    position: relative;
    padding: 0;
    margin: 0;
    border: 0;

    > fieldset {

        display: block;
        margin: 0;
        padding: 0;
        border: 0;

        &:disabled {

            pointer-events: none;

        }

    }

    &.is-locked {

        > fieldset {

            opacity: 0.2;
            pointer-events: none;

        }

        > #{$root}-loader {

            visibility: visible;

        }

    }

    #{$root}-loader {

        position: absolute;
        z-index: 10;
        display: block;
        visibility: hidden;
        opacity: 1;
        content: '';
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        pointer-events: none;

        &.is-active {

            visibility: visible;

        }

    }

    #{$root}-loader-canvas {

        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate( -50%, -50% );
        text-align: center;

    }

    #{$root}-loader-spinner {

        display: inline-block;
        animation: sp-universalfront-spin 0.5s linear infinite;
        border: solid 3px transparent;
        border-top: solid 3px #0071a1;
        border-radius: 100%;
        width: 10px;
        height: 10px;

    }

    &.is-loading-file {

        #{$root}-loader-progress-bar {

            display: block;

        }

    }

    #{$root}-loader-progress-bar {

        display: none;
        max-width: 100%;
        width: 3em;
        background: silver;
        margin-top: 0.5em;
        border-radius: 5px;
        overflow: hidden;

    }

    #{$root}-loader-progress-bar-strip {

        width: 0;
        height: 0.5em;
        background: #0071a1;

        &[data-sp-progress="100"] {

            animation: sp-universalfront-barberpole 1s linear infinite;
            background-size: 15px 15px;
            background-image: linear-gradient(
                            45deg,
                            rgba(white, 0.5)  25%,
                            transparent       25%,
                            transparent       50%,
                            rgba(white, 0.5)  50%,
                            rgba(white, 0.5)  75%,
                            transparent       75%,
                            transparent
            );

        }

    }

    @keyframes sp-universalfront-spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes sp-universalfront-barberpole {
        from { background-position: 0 0; }
        to   { background-position: 60px 30px; }
    }

}