@use "../../core/jkl";
@use "../file";

@layer jokul.components {
    .jkl-file-input {
        --jkl-file-input-dropzone-padding: var(--jkl-unit-30);
        --jkl-file-input-dropzone-gap: var(--jkl-unit-30);
        --jkl-file-cta-gap: var(--jkl-unit-30);
        --jkl-file-cta-with-files-gap: var(--jkl-unit-15);
        --jkl-file-list-gap: var(--jkl-unit-10);

        &__dropzone {
            --border-color: var(--jkl-color-border-input);
            --background-color: transparent;

            border: var(--border-color) 1px dashed;
            border-radius: jkl.rem(4px);
            padding: var(--jkl-file-input-dropzone-padding);
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            flex-wrap: nowrap;
            gap: var(--jkl-file-input-dropzone-gap);

            @include jkl.motion("standard", "productive");
            transition-property: background-color;
            background-color: var(--background-color);

            &--enter {
                --border-color: var(--jkl-color-border-input-focus);
                --background-color: var(--jkl-color-background-container-high);
                border-style: solid;
            }

            &__drag-text {
                @include jkl.text-style("paragraph-small");

                @include jkl.small-device {
                    display: none;
                }
            }
        }

        &__call-to-action {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            flex-wrap: nowrap;

            &:has(:focus-visible) {
                .jkl-button {
                    transform: scale(1.05);

                    @include jkl.focus-outline;

                    &:active {
                        transform: scale(1);
                    }
                }
            }
        }

        &__dropzone-hint {
            margin-top: var(--jkl-unit-30);
        }

        &--has-files &__dropzone-hint {
            display: none;
        }

        &__max-size-text {
            @include jkl.text-style("text-small");
            color: var(--jkl-color-text-subdued);
            margin-top: var(--jkl-unit-30);
        }

        &__files {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: var(--jkl-file-list-gap);
        }

        &--small {
            .jkl-file-input__dropzone-hint {
                margin: 0;
                display: block;
            }

            .jkl-file-input__dropzone {
                padding: var(--jkl-unit-20);
                gap: var(--jkl-unit-20);
                margin-bottom: var(--jkl-unit-20);
                justify-content: flex-start;
                flex-direction: row;
                max-width: fit-content;
            }

            .jkl-file-input__call-to-action {
                @include jkl.text-style("text-small");

                gap: #{jkl.$unit-15};
                flex-direction: row;
                justify-content: flex-start;
            }

            .jkl-file-input__max-size-text {
                margin-top: calc(-1 * var(--jkl-unit-15));
                margin-bottom: var(--jkl-unit-20);
            }
        }
    }
}