.FileElement { background: rgb(var(--center-channel-bg-rgb)); border: 1px solid rgba(var(--center-channel-color-rgb), 0.16); min-width: 300px; width: max-content; height: 64px; box-shadow: var(--elevation-1); display: flex; position: relative; .fileElement-file-name { font-size: 14px; font-weight: 600; } .fileElement-file-ext-and-size { text-transform: uppercase; font-weight: 400; font-size: 12px; line-height: 16px; color: rgb(var(--center-channel-color-rgb)); } .fileElement-file-uploading { font-weight: 400; font-size: 12px; line-height: 16px; color: rgb(var(--center-channel-color-rgb)); } .fileElement-icon-division { margin-top: 8px; } .fileElement-icon { font-size: 48px; color: rgba(237, 82, 42, 1); } .fileElement-download-btn { display: none; font-size: 20px; color: rgba(var(--center-channel-color-rgb), 0.56); padding: 8px; &:hover { background-color: rgba(var(--center-channel-color-rgb), 0.08); border-radius: 5px; cursor: pointer; } } .fileElement-menu-icon { display: none; float: right; } .delete-menu { display: none; margin-top: -30px; } .fileElement-delete-download { position: absolute; display: flex; right: 0; } &:hover { .fileElement-download-btn { display: block; } .fileElement-menu-icon { display: block; } .delete-menu { display: block; } } .progress { position: absolute; bottom: 0; width: 100%; height: 7px; margin-bottom: 0; border-radius: 0; } .progress-bar { float: left; width: 0%; height: 100%; line-height: 20px; color: #fff; text-align: center; background-color: #285ab9; } .dialog { max-width: 550px !important; } }