.image-upload {
    width: 100%;
}

.image-upload__dropzone {
    border: 2px dashed var(--primary);
    border-radius: var(--bs-border-radius);
    padding: 2rem;
    text-align: center;
    cursor: pointer;

    background-color: var(--light);
    color: var(--secondary);

    outline: none;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.image-upload__dropzone:hover,
.image-upload__dropzone:focus-visible {
    background-color: var(--accent);
}

.image-upload__dropzone:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(160, 98, 53, 0.25);
}

.image-upload--dragover {
    border-color: var(--primary);
    background-color: var(--accent);
    box-shadow: 0 0 0 0.25rem rgba(160, 98, 53, 0.25);
}

.image-upload__preview-image {
    display: block;
    max-width: 128px;
    max-height: 128px;
    margin: 0 auto;
    object-fit: contain;

    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 0.25rem;
    background-color: var(--bs-body-bg);
    box-shadow: var(--bs-box-shadow-sm);
}