@use '../core/styles/common/tokens' as *;

@mixin _kbq-single-file-upload-theme() {
    background-color: var(--kbq-file-upload-single-default-container-background);
    border-color: var(--kbq-file-upload-single-default-container-border) !important;

    &:not(.kbq-disabled, .kbq-error) {
        .kbq-file-upload__dropzone-icon {
            color: var(--kbq-file-upload-single-default-dropzone-icon-color);
        }

        .kbq-file-item__text-wrapper .kbq-icon.kbq-empty {
            color: var(--kbq-file-upload-single-default-left-icon-color);
        }

        .kbq-file-item__size {
            color: var(--kbq-file-upload-single-default-file-size-text-color);
        }
    }

    &.kbq-file-drop_dragover {
        background-color: var(--kbq-file-upload-single-states-on-drag-container-background);
        border-color: var(--kbq-file-upload-single-states-on-drag-container-border) !important;
    }

    &.kbq-error:not(.kbq-disabled) {
        &:not(.kbq-file-drop_dragover) {
            background-color: var(--kbq-file-upload-single-states-error-container-background);
            border-color: var(--kbq-file-upload-single-states-error-container-border) !important;
        }

        .kbq-file-upload__dropzone-icon {
            color: var(--kbq-file-upload-single-states-error-dropzone-icon-color);
        }

        .kbq-file-item__text-wrapper .kbq-icon.kbq-empty {
            color: var(--kbq-file-upload-single-states-error-left-icon-color);
        }

        .kbq-file-item__text,
        .kbq-file-upload__dropzone-caption:not(.kbq-link) {
            color: var(--kbq-file-upload-single-states-error-text-block-color);
        }

        .kbq-file-item__size {
            color: var(--kbq-file-upload-single-states-error-file-size-text-color);
        }
    }

    &.kbq-disabled {
        background-color: var(--kbq-file-upload-single-states-disabled-container-background);
        border-color: var(--kbq-file-upload-single-states-disabled-container-border) !important;

        .kbq-file-upload__dropzone-icon {
            color: var(--kbq-file-upload-single-states-disabled-dropzone-icon-color);
        }

        .kbq-file-item__text-wrapper .kbq-icon.kbq-empty {
            color: var(--kbq-file-upload-single-states-disabled-left-icon-color);
        }

        .kbq-file-upload__dropzone-caption,
        .kbq-file-item__text {
            color: var(--kbq-file-upload-single-states-disabled-text-block-color);
        }

        .kbq-file-item__size {
            color: var(--kbq-file-upload-single-states-disabled-file-size-text-color);
        }
    }
}

.kbq-single-file-upload {
    .kbq-file-upload__dropzone-icon {
        > svg {
            vertical-align: bottom;
        }
    }

    &.kbq-single-file-upload_selected .kbq-file-upload {
        .kbq-file-item {
            padding: kbq-difference-series-css-variables(
                    [ file-upload-size-single-container-padding-vertical,
                    file-upload-size-single-container-border-width]
                )
                kbq-difference-series-css-variables(
                    [ file-upload-size-single-container-padding-horizontal,
                    file-upload-size-single-container-border-width]
                );
            padding-right: 0;
        }
    }

    &:not(.kbq-single-file-upload_selected) .kbq-file-upload {
        padding: calc(
                var(--kbq-file-upload-size-single-container-padding-vertical) - var(
                        --kbq-file-upload-size-single-container-border-width
                    )
            )
            calc(
                var(--kbq-file-upload-size-single-container-padding-horizontal) - var(
                        --kbq-file-upload-size-single-container-border-width
                    )
            );
    }

    .kbq-file-upload {
        min-height: var(--kbq-file-upload-single-min-height);

        border-radius: var(--kbq-file-upload-size-single-container-border-radius);
        border-width: var(--kbq-file-upload-size-single-container-border-width);
        border-style: dashed;

        .kbq-file-item {
            width: 100%;

            .kbq-file-item__text-wrapper {
                display: flex;
                align-items: center;
                width: 100%;

                gap: var(--kbq-file-upload-size-single-container-content-gap-horizontal);

                .kbq-file-item__text {
                    width: 120px;
                    flex-grow: 1;
                }
            }

            .kbq-file-item__size {
                padding: 0 var(--kbq-size-s);
            }
        }

        .kbq-file-upload__action {
            padding: 13px;
        }

        @include _kbq-single-file-upload-theme();
    }
}