// 1. Make whole drop zone clickable. Cursor is hard-coded because links always use pointer.
// 2. Increase specificity (also in the mixin) by including `.FileUploaderInput__input` to override the `active` state.
// 3. Increase specificity to make the disabled state override any other

@use '../../settings/cursors';
@use '../../theme/form-fields' as form-fields-theme;
@use '../../tools/accessibility';
@use '../../tools/form-fields' as form-fields-tools;
@use '../../tools/links';
@use '../../tools/typography';
@use 'theme';

$_field-name: 'FileUploaderInput';

.FileUploaderInput__label {
    @include form-fields-tools.box-field-label();
}

.FileUploaderInput__label--hidden {
    @include form-fields-tools.label-hidden();
}

.FileUploaderInput__label--required::after {
    @include form-fields-tools.label-required();
}

.FileUploaderInput__dropZone {
    position: relative; // 1.
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: theme.$input-drop-zone-column-gap;
    padding: theme.$input-drop-zone-padding;
    border: theme.$input-drop-zone-border;
    border-radius: theme.$input-drop-zone-border-radius;
    background-color: theme.$input-drop-zone-background;
}

.FileUploaderInput__input:focus-visible ~ .FileUploaderInput__dropZone {
    box-shadow: form-fields-theme.$input-focus-shadow;
}

.FileUploaderInput__dropZone > svg {
    color: theme.$input-drop-zone-icon-color;
}

.FileUploaderInput__dropZoneLabel {
    @include typography.generate(theme.$input-drop-zone-label-typography);

    color: theme.$input-drop-zone-label-color;
}

// 1.
.FileUploaderInput__link {
    @include links.base();
    @include links.stretch();

    cursor: pointer;
}

.FileUploaderInput__dragAndDropLabel {
    display: none;
}

.FileUploaderInput__input {
    @include accessibility.hide-text();
}

.FileUploaderInput__helperText {
    @include form-fields-tools.helper-text();

    grid-column-start: 2;
}

.FileUploaderInput__validationText,
.FileUploaderInput > [data-spirit-element='validation_text'] {
    @include form-fields-tools.validation-text();
}

// stylelint-disable selector-max-class -- We need to target inner elements in a specific component state.
.FileUploaderInput.has-drag-and-drop .FileUploaderInput__dropZone {
    border: theme.$input-drop-zone-draggable-border;
}

.FileUploaderInput.has-drag-and-drop .FileUploaderInput__dragAndDropLabel {
    display: initial;
}

.FileUploaderInput .FileUploaderInput__dropZone:hover {
    border-color: theme.$input-drop-zone-border-color-state-hover;
    background-color: theme.$input-drop-zone-background-state-hover;
}

.FileUploaderInput > .FileUploaderInput__input:active ~ .FileUploaderInput__dropZone {
    border-color: theme.$input-drop-zone-border-color-state-active;
    background-color: theme.$input-drop-zone-background-state-active;
}

// 2.
.FileUploaderInput.is-dragging > .FileUploaderInput__input ~ .FileUploaderInput__dropZone {
    border: theme.$input-drop-zone-dragging-border;
}

@include form-fields-tools.input-field-validation-states($_field-name); // 2.

:is(.FileUploaderInput--disabled, .FileUploaderInput.is-disabled)
    :is(.FileUploaderInput__validationText, [data-spirit-element='validation_text']) {
    @include form-fields-tools.validation-text-disabled();
}

:is(.FileUploaderInput--disabled, .FileUploaderInput.is-disabled) .FileUploaderInput__helperText {
    @include form-fields-tools.helper-text-disabled();
}

// 3.
// stylelint-disable selector-max-compound-selectors, selector-max-specificity
.FileUploaderInput > .FileUploaderInput__input:disabled ~ .FileUploaderInput__dropZone > svg,
.FileUploaderInput
    > .FileUploaderInput__input:disabled
    ~ .FileUploaderInput__dropZone
    > .FileUploaderInput__dropZoneLabel,
.FileUploaderInput
    .FileUploaderInput__input:disabled
    ~ .FileUploaderInput__dropZone
    > .FileUploaderInput__dropZoneLabel
    > .FileUploaderInput__link {
    color: form-fields-theme.$input-color-state-disabled;
}

.FileUploaderInput
    .FileUploaderInput__input:disabled
    ~ .FileUploaderInput__dropZone
    > .FileUploaderInput__dropZoneLabel
    > .FileUploaderInput__link {
    cursor: cursors.$disabled;
}
// stylelint-enable selector-max-compound-selectors, selector-max-specificity

.FileUploaderInput > .FileUploaderInput__input:disabled ~ .FileUploaderInput__dropZone {
    border-color: form-fields-theme.$input-border-color-state-disabled;
    background-color: form-fields-theme.$input-background-color-state-disabled;
}
// stylelint-enable selector-max-class

.FileUploaderInput--disabled > .FileUploaderInput__label {
    @include form-fields-tools.label-disabled();
}
