@import "../../styles/index";
@keyframes placeHolderShimmer {
    0% {
        background-position: -105px 0
    }
    100% {
        background-position: 105px 0
    }
}

.dnn-content-load-wrapper {
    padding: 12px;
    transition: opacity .4s .6s;
    position: relative;
    width: 100%;
    &.upload-error {
        background-color: var(--dnn-color-surface, rgba(255, 255, 255, 0.5));
        .try-load-again {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            text-align: center;
            > div {
                max-width: 300px;
                margin: 0 auto;
                position: relative;
                top: 50%;
                transform: translateY(-50%);
                > p {
                    margin: 10px 0;
                }
                > div.upload-icon {
                    width: 40px;
                    height: 40px;
                    margin: 0 auto;
                    > svg {
                        fill: var(--dnn-color-neutral, @mountainMist);
                        &:hover {
                            fill: var(--dnn-color-neutral, @mountainMist);
                        }
                    }
                }
            }
            span {
                float: none;
                color: var(--dnn-color-primary, @curiousBlue);
                cursor: pointer;
            }
        }
        .upload-bar-container {
            .upload-bar-box {
                background: var(--dnn-color-neutral-light, @alto);
            }
        }
    }
    .upload-bar-container {
        width: 105px;
        height: 20px;
        background: transparent;
        box-sizing: border-box;
        margin: 16px auto 0;
        .upload-file-name {
            margin-bottom: 10px;
        }
        .upload-icon {
            width: 42px;
            height: 42px;
            margin: auto;
            svg {
                margin-top: 8px;
                margin-bottom: 3px;
            }
        }
        h4 {
            color: @curiousBlue;
            margin: auto;
            text-align: center;
            font-size: 14px;
            margin: 15px 10px 10px;
        }
        .upload-bar-box {
            position: relative;
            float: left;
            width: 100%;
            height: 5px;
            background: @gallery;
            margin-top: 5px;
            .upload-bar {
                width: 0;
                float: left;
                height: 100%;
                left: 0px;
                transition: .1s;
                animation-duration: 1.4s;
                animation-fill-mode: forwards;
                animation-iteration-count: infinite;
                animation-name: placeHolderShimmer;
                animation-timing-function: linear;
                width: 105px;
                background: var(--dnn-color-primary-light, @nonPhotoBlue);
                background-image: -webkit-linear-gradient(to right, var(--dnn-color-primary-light, @nonPhotoBlue) 0%, var(--dnn-color-background, @nonPhotoBlue) 35%, var(--dnn-color-primary-light, @nonPhotoBlue) 100%);
                background-image: linear-gradient(to right, var(--dnn-color-primary-light, @nonPhotoBlue) 0%, var(--dnn-color-background, @nonPhotoBlue) 35%, var(--dnn-color-primary-light, @nonPhotoBlue) 100%);
                background-size: 105px 5px;
                height: 5px;
                position: relative;
            }
        }
    }
}