@import "wagtailadmin/scss/variables.scss";
@import "wagtailadmin/scss/mixins.scss";
@import "wagtailadmin/scss/grid.scss";

.replace-file-input{
    display:inline-block;
    position:relative;
    overflow:hidden;
    padding-bottom:2px;

    input[type=file]{
        padding:0;
        opacity:0;
        position:absolute;
        top:0;
        right:0;
        direction:ltr;
        width:auto;
        display:block;
        font-size:5em;

        &:hover{
            cursor:pointer;
        }
    }

    &:hover{
        cursor:pointer;

        button{
            background-color:$color-teal-darker;
        }
    }
}

.upload-list{
    > li{
        padding:1em;
    }
    .left{
        text-align:center;
    }

    .preview{
        width:150px;
        min-height:150px;
        display:block;
        position:relative;
        text-align:center;
        max-width:100%;
        margin:auto;
    }
    .progress, .thumb, .thumb:before, canvas, img{
        position:absolute;
        max-width:100%;
    }
    .progress{
        z-index:4;
        top:60%;
        left:20%;
        right:20%;
        width:60%;
        @include box-shadow(0 0 5px 2px rgba(255, 255, 255, 0.4));
    }
    .thumb{
        top:0;right:0;bottom:0;left:0;
        z-index:1;
        width:100%;
    }

    .thumb:before, canvas, img{
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto;
    }
    .thumb:before{
        z-index:2;
        top:0;
        width:1em;
        font-size:10em;
        line-height:1.4em;
        color:lighten($color-grey-4, 4%);
    }
    canvas, img{
        z-index:3;
    }

    .hasthumb{
        &:before{
            display:none;        
        }
    }

    .status-msg{
        display:none;
    }

    .upload-complete{
        .progress{
            opacity:0;
        }
    }
    .upload-uploading{

    }
    .upload-success{
        .status-msg.success{
            display:block;
        }
    }
    .upload-failure{
        border-color:$color-red;

        .preview{
            display:none;
        }
        
        .status-msg.failure{
            display:block;
        }
    }
}
