@use './file-upload-theme' as theme;
@use '../form-field/form-field';

.kbq-file-upload {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    position: relative;

    .kbq-file-item {
        display: flex;
        align-items: center;
    }

    .kbq-file-dropzone {
        display: flex;
        align-items: baseline;
        gap: var(--dropzone-gap, var(--kbq-file-upload-size-dropzone-content-gap-horizontal));
    }

    .kbq-ellipsis-center {
        position: relative;
        display: flex;

        .kbq-ellipsis-center_data-text-start {
            flex: 0 1 auto;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: pre;
        }

        .kbq-ellipsis-center_data-text-end {
            flex: 1 0 auto;
            overflow: hidden;
            white-space: pre;
        }
    }
}

.kbq-file-upload__hint {
    @include form-field.kbq-form-field-hint-geometry();
}

@include theme.kbq-file-upload-theme();
@include theme.kbq-file-upload-typography();