// 1. Force the color to be printed as-is, without any color adjustment.

@use 'sass:map';
@use '../settings/cursors';
@use '../theme/form-fields' as form-fields-theme;
@use 'accessibility';
@use 'reset';
@use 'typography';

@mixin label-disabled() {
    color: form-fields-theme.$label-color-state-disabled;

    &::after {
        color: form-fields-theme.$label-color-state-disabled;
    }
}

@mixin label-hidden() {
    @include accessibility.hide-text();
}

@mixin label-required() {
    @include typography.generate(form-fields-theme.$label-required-typography);

    content: '*';
    margin-left: form-fields-theme.$label-required-margin-left;
    color: form-fields-theme.$label-required-color;
}

@mixin input-disabled() {
    color: form-fields-theme.$input-color-state-disabled;
    cursor: cursors.$disabled;
}

@mixin validation-text() {
    @include typography.generate(form-fields-theme.$validation-text-typography);

    display: block;
    margin-top: form-fields-theme.$validation-text-margin-top;

    & > ul {
        @include reset.list();
    }
}

@mixin validation-text-disabled() {
    color: form-fields-theme.$validation-text-color-state-disabled;
}

@mixin inline-field-root() {
    display: inline-flex;
    margin-block: form-fields-theme.$inline-field-margin-y;
    cursor: cursors.$form-fields;
}

@mixin inline-field-root-disabled() {
    cursor: cursors.$disabled;
}

@mixin box-field-root() {
    display: inline-block;
    width: form-fields-theme.$box-field-input-width;
}

@mixin inline-field-label() {
    @include typography.generate(form-fields-theme.$input-typography);

    display: inline-block;
    color: form-fields-theme.$label-color-state-default;
}

@mixin box-field-label() {
    @include typography.generate(form-fields-theme.$box-field-label-typography);

    display: block;
    margin-bottom: form-fields-theme.$box-field-label-margin-bottom;
    color: form-fields-theme.$label-color-state-default;
}

@mixin inline-field-input() {
    appearance: none;
    border: form-fields-theme.$inline-field-input-border-width solid form-fields-theme.$input-border-color;
    background-color: form-fields-theme.$input-background-color;
    cursor: cursors.$form-fields;
    print-color-adjust: exact; // 1.

    &:focus-visible {
        outline: 0;
        box-shadow: form-fields-theme.$input-focus-shadow;
    }

    @media (hover: hover) {
        &:hover {
            background-color: form-fields-theme.$input-background-color-state-hover;
        }
    }

    &:active {
        background-color: form-fields-theme.$input-background-color-state-active;
    }
}

@mixin box-field-input() {
    @include typography.generate(form-fields-theme.$input-typography);

    display: block;
    width: 100%;
    padding: form-fields-theme.$box-field-input-padding-y form-fields-theme.$box-field-input-padding-x;
    color: form-fields-theme.$box-field-input-color-state-default;
    border: form-fields-theme.$box-field-input-border-width form-fields-theme.$box-field-input-border-style
        form-fields-theme.$input-border-color;
    border-radius: form-fields-theme.$box-field-input-border-radius;
    background: form-fields-theme.$input-background-color;

    &::placeholder {
        color: form-fields-theme.$box-field-input-placeholder-color-state-default;
        opacity: 1;
    }

    @media (hover: hover) {
        &:hover {
            background-color: form-fields-theme.$input-background-color-state-hover;
        }
    }

    &:active,
    &:focus-within {
        background-color: form-fields-theme.$input-background-color-state-active;
    }
}

@mixin input-field-validation-states($field-name) {
    @each $validation-state-name, $validation-state-value in form-fields-theme.$validation-states {
        @if $field-name == 'FileUploaderInput' {
            :is(.#{$field-name}--#{$validation-state-name}, .#{$field-name}.has-#{$validation-state-name})
                > .#{$field-name}__input
                ~ .#{$field-name}__dropZone {
                border-color: map.get($validation-state-value, input-border-color);
            }
        } @else if $field-name == 'Select' {
            :is(.#{$field-name}--#{$validation-state-name}, .#{$field-name}.has-#{$validation-state-name})
                > .#{$field-name}__inputContainer
                > .#{$field-name}__input {
                border-color: map.get($validation-state-value, input-border-color);
            }
        } @else {
            :is(.#{$field-name}--#{$validation-state-name}, .#{$field-name}.has-#{$validation-state-name})
                > .#{$field-name}__input {
                @if $field-name != 'UNSTABLE_Toggle' {
                    border-color: map.get($validation-state-value, input-border-color);
                }

                @if $field-name == 'Checkbox' {
                    &:indeterminate,
                    &:checked {
                        background-color: map.get($validation-state-value, input-border-color);
                    }
                }

                @if $field-name == 'Radio' {
                    &::before {
                        background-color: map.get($validation-state-value, input-border-color);
                    }
                }
            }
        }

        @if $field-name == 'TextField' {
            :is(.#{$field-name}--#{$validation-state-name}, .#{$field-name}.has-#{$validation-state-name})
                .#{$field-name}__passwordToggle
                > .#{$field-name}__input
                ~ .#{$field-name}__passwordToggle__button::before {
                border-color: map.get($validation-state-value, input-border-color);
            }
        }

        @if $field-name != 'Checkbox' or $field-name != 'Radio' {
            :is(.#{$field-name}--#{$validation-state-name}, .#{$field-name}.has-#{$validation-state-name})
                :is(
                    .#{$field-name}__validationText,
                    .#{$field-name}__validationText,
                    [data-spirit-element='validation_text']
                ) {
                color: map.get($validation-state-value, validation-text-color);
            }
        }
    }
}

@mixin box-field-fluid() {
    width: 100%;
}

@mixin box-field-focus-visible() {
    border-color: form-fields-theme.$box-field-input-border-color-focus;
    outline: 0;
    box-shadow: form-fields-theme.$input-focus-shadow;
}

@mixin box-field-disabled-input() {
    @include input-disabled();

    border-color: form-fields-theme.$input-border-color-state-disabled;
    background-color: form-fields-theme.$input-background-color-state-disabled;

    &::placeholder {
        color: form-fields-theme.$box-field-input-placeholder-color-state-disabled;
    }
}

@mixin item() {
    align-items: center;
    width: 100%;
    padding: form-fields-theme.$item-padding-y form-fields-theme.$item-padding-x;
    margin-block: 0;
    border-radius: form-fields-theme.$item-border-radius;
    background-color: form-fields-theme.$item-background-color-state-default;

    @media (hover: hover) {
        &:hover {
            background-color: form-fields-theme.$item-background-color-state-hover;
        }
    }

    &:active {
        background-color: form-fields-theme.$item-background-color-state-active;
    }
}

@mixin item-disabled() {
    background-color: form-fields-theme.$item-background-color-state-default;
}

@mixin item-validation-text() {
    @include typography.generate(form-fields-theme.$item-validation-text-typography);
}

@mixin item-label() {
    @include typography.generate(form-fields-theme.$item-label-typography);

    color: form-fields-theme.$label-color-state-default;
}

@mixin helper-text() {
    @include typography.generate(form-fields-theme.$helper-text-typography);

    display: block;
    margin-top: form-fields-theme.$helper-text-margin-top;
    color: form-fields-theme.$helper-text-color-state-default;
}

@mixin helper-text-disabled() {
    color: form-fields-theme.$helper-text-color-state-disabled;
}

@mixin item-helper-text() {
    @include typography.generate(form-fields-theme.$item-helper-text-typography);
}
