@include exports("dropzone/layout") {
    // Dropzone
    .k-external-dropzone {
        display: flex;
    }

    // Dropzpne icon + hint + note wrapper
    .k-dropzone-inner {
        @include use-background-clip();
        padding: $external-dropzone-padding-y $external-dropzone-padding-x;
        width: 100%;
        height: 100%;
        border-width: $upload-border-width;
        border-style: solid;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        cursor: pointer;

        >.k-icon {
            margin-bottom: $upload-dropzone-padding-y * 2.75;
            font-size: $icon-size * 3;
        }

        .k-dropzone-hint,
        .k-dropzone-note {
            display: block;
        }

        .k-dropzone-hint {
            font-size: $icon-size;
            margin-bottom: $external-dropzone-spacing * 2;
        }

        .k-dropzone-note {
            font-size: $font-size-sm;
            margin-bottom: $external-dropzone-spacing;
        }
    }

}