.upload-file{display:flex}[dir] .upload-file{cursor:pointer}.upload-file__preview{display:flex;align-items:center;justify-content:center;color:#7367f0;overflow:hidden;transition:.3s ease-in-out}[dir] .upload-file__preview{background:#f6f6f6;border-radius:.357rem}[dir=ltr] .upload-file__preview{margin-right:15px}[dir=rtl] .upload-file__preview{margin-left:15px}.upload-file:hover .upload-file__preview{color:#fff}[dir] .upload-file:hover .upload-file__preview{background:#7367f0}.upload-file--sm .upload-file__preview{width:60px;height:60px}.upload-file--md .upload-file__preview{width:100px;height:100px}.upload-file--lg .upload-file__preview{width:200px;height:200px}.upload-file input{opacity:0;position:absolute;z-index:-1}.upload-file.is-loading{pointer-events:none;opacity:.8}.upload-file.is-loading .upload-file__preview{position:relative}.upload-file.is-loading .upload-file__preview:before{position:absolute;top:50%;display:block;width:1.6rem;height:1.6rem;content:""}[dir] .upload-file.is-loading .upload-file__preview:before{border:.3rem solid #7367f0;border-top-color:#f6f6f6;border-radius:50%}[dir=ltr] .upload-file.is-loading .upload-file__preview:before{left:50%;margin:-.8rem 0 0 -.8rem;animation:spin-ltr 2s linear infinite}[dir=rtl] .upload-file.is-loading .upload-file__preview:before{right:50%;margin:-.8rem -.8rem 0 0;animation:spin-rtl 2s linear infinite}.upload-file.is-loading .upload-file__preview .upload-file-cover,.upload-file.is-loading .upload-file__preview svg{display:none}.upload-file-cover{position:relative;width:100%;height:100%}[dir] .upload-file-cover{background:#f6f6f6}.upload-file-cover__image{width:100%;height:100%}.upload-file-cover__image img{width:100%;height:100%;object-fit:cover}.upload-file-cover__icon{position:absolute;top:0;bottom:0;color:#ea5455;display:flex;align-items:center;justify-content:center;opacity:0;transition:.2s ease-in-out}[dir] .upload-file-cover__icon{background:rgba(0,0,0,.5)}[dir=ltr] .upload-file-cover__icon,[dir=rtl] .upload-file-cover__icon{right:0;left:0}.upload-file-cover:hover .upload-file-cover__icon{opacity:1}@keyframes spin-ltr{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes spin-rtl{0%{transform:rotate(0deg)}to{transform:rotate(-1turn)}}