//
// Dropzone Variables
//
$dropzone-text: #333;
$dropzone-border: #ccc;
$dropzone-margin: 15px 0;
$dropzone-hover-border: #999;
$dropzone-hint-title-size: 12px;
$dropzone-hint-title-weight: bold;
$dropzone-close-height: 26px;
$dropzone-close-width: 26px;
$dropzone-close-size: 14px;
$dropzone-close-bg: #eaeaea;
$dropzone-close-text: $dropzone-text;
$dropzone-close-hover-bg: $brand-danger;
$dropzone-close-hover-text: #fff;
$dropzone-icon-size: 16px;
$dropzone-icon-height: 40px;
$dropzone-icon-width: 40px;
$dropzone-icon-radius: 50%;
$dropzone-icon-bg: #eee;
$dropzone-icon-ok-text: #fff;
$dropzone-icon-ok-bg: $brand-success;

//
// Dropzone
//
.dropzone {
    position: relative;
    cursor: pointer;
    margin: $dropzone-margin;
    padding: 1.25em;
    padding-right: $dropzone-close-width + 20px;
    color: $dropzone-text;
    border: 1px dashed $dropzone-border;

    @include transition(all 0.3s ease-in-out);

    &:hover {
        border-color: $dropzone-hover-border;
    }
}

.dropzone-mask {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}

//
// Dropzone Close
//
.dropzone-close {
    cursor: pointer;
    position: absolute;
    top: 5px;
    right: 5px;
    height: $dropzone-close-height;
    width: $dropzone-close-width;
    font-family: FontAwesome;
    font-size: $dropzone-close-size;
    line-height: $dropzone-close-height;
    text-align: center;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    overflow: hidden;
    background-color: $dropzone-close-bg;
    color: $dropzone-close-text;

    &:hover {
        color: $dropzone-close-hover-text;
        background-color: $dropzone-close-hover-bg;
    }

    &:before {
        content: "\f00d";
    }
}

//
// Dropzone Hint
//
// Markup:
// <div class="dropzone-hint">
//   <div class="dropzone-hint-media">
//     <span class="dropzone-hint-icon"></span>
//   </div>
//   <div class="dropzone-hint-body">
//     <h3 class="dropzone-hint-title">Title</h3>
//     <p class="dropzone-hint-message">Message</h3>
//   </div>
// </div>
//
.dropzone-hint {
    display: table;
}

.dropzone-hint-media,
.dropzone-hint-body {
    display: table-cell;
    vertical-align: middle;
}

.dropzone-hint-body {
    *:first-child {
        margin-top: 0;
    }

    *:last-child {
        margin-bottom: 0;
    }
}

.dropzone-hint-media {
    padding-right: 1em;
}

.dropzone-hint-icon {
    height: $dropzone-icon-height;
    width: $dropzone-icon-width;
    text-align: center;
    line-height: $dropzone-icon-height;
    font-size: $dropzone-icon-size;
    background-color: $dropzone-icon-bg;
    border-radius: $dropzone-icon-radius;
    font-family: FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);

    &:before {
        content: "\f093";
    }
}

.dropzone-hint-title {
    font-size: $dropzone-hint-title-size;
    font-weight: $dropzone-hint-title-weight;
    margin-bottom: 0.25em;
}

//
// Drop progress
//
.drop-status-ok {
    .dropzone-hint-icon {
        color: $dropzone-icon-ok-text;
        background: $dropzone-icon-ok-bg;
    }
}

.drop-in-progress {
    .dropzone-hint-icon {
        &:before {
            content: "\f063";
        }
    }
}

//
// Upload Variables
//
$upload-queue-margin: $dropzone-margin;
$upload-queue-progress-bg: $brand-success;
$upload-queue-progress-uploading-bg: $brand-info;
$upload-queue-progress-error-bg: $brand-danger;

//
// Upload queue
//
.upload-queue {
    margin: $upload-queue-margin;
}

.upload-queue-progress {
    position: relative;
    padding: 5px;
    color: #fff;
    background-color: #999;
    border: 1px solid rgba(0, 0, 0, 0.15);
    text-align: right;
}

.upload-queue-progress-bar {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: $upload-queue-progress-bg;
}

.upload-queue-progress-percentage,
.upload-queue-progress-message {
    display: inline;
    position: relative;
    z-index: 2;
}

//
// Upload filepicker
//
.upload-file-picker {
    position: fixed;
    bottom: 0;
    right: 0;
    height: 1px;
    width: 1px;
    visibility: hidden;
}

//
// Upload status
//
.uploading {
    .upload-queue-progress-bar {
        background-color: $upload-queue-progress-uploading-bg;
    }
}

.error {
    .upload-queue-progress-bar {
        background-color: $upload-queue-progress-error-bg;
    }
}
