@import 'wagtailadmin/scss/variables';
@import 'wagtailadmin/scss/mixins';
@import 'wagtailadmin/scss/grid';

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

    [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 {
        box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.4);
        z-index: 4;
        top: 60%;
        left: 20%;
        right: 20%;
        width: 60%;
    }

    .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-success {
        .status-msg.success {
            display: block;
        }
    }

    .upload-failure {
        border-color: $color-red;

        .preview {
            display: none;
        }

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

    .upload-server-error {
        border-color: $color-red;

        .preview {
            display: none;
        }

        .status-msg.server-error {
            display: block;
        }
    }
}