/**
 * File Uploader
 */
.file-uploader {
    border: 2px dashed #e2e5ec;
    border-radius: 4px;
    padding: 20px;
    text-align: center;
    position: relative;
    cursor: pointer;

    &:hover {
        background: #F2F2F2;
    }

    /* Shared styles */
    .has-files,
    .no-files {
        display: table;
        vertical-align: middle;
        position: relative;
        width: 100%;

        &.ready {
            color: #BBB;
        }

        &.uploading {
            color: blue;
        }

        &.error {
            color: red;
        }

        &.success {
            color: green;
        }
    }

    /* No Files, uploader */
    .no-files {
        .input-file {
            opacity: 0;
            width: 100%;
            height: 100%;
            position: absolute;
            cursor: pointer;
        }

        .message {
            font-size: 1.2em;
            text-align: center;
            display: table-cell;
            width: 100%;
            height: 100%;
            vertical-align: middle;
        }
    }

    .has-files {
        ul {
            display: flex;
            flex-wrap: wrap;
            padding: 0;
            margin: 0;

            li {
                flex-grow: 1;
                flex-basis: 0;
                background: #FFF;
                padding: 10px;
                margin: 10px;
                border: 1px solid #e2e2e2;
                font-size: 10px;

                img {
                    width: 90px;
                    height: 90px;
                }
            }
        }
    }
}
