.dropzone {
    border: none;
}

.dropzone--isActive {
    background-color: var(--colors-Success);
}

.dropzone--isRejecting {
    background-color: var(--colors-Warn);
}

.thumbnail {
    position: relative;
    border: 1px dashed var(--colors-ContrastNeutral);
    margin-bottom: calc(var(--spacing-Full) - var(--spacing-Quarter));
    height: 216px;
    overflow: hidden;
    cursor: pointer;
    /* TODO: border-color: #fff; on hover */
}
.thumbnail--highlight {
    outline: 2px solid var(--colors-Success);
}
.thumbnail__loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.cropArea {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
}

.cropArea__image {
    position: absolute;
}

.cropArea__image--placeholder {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
