@use '@mskcc/themes/tokens' as tk;
@use '@carbon/styles/scss/config' as *;
@use '@mskcc/fundamentals/src/_variables.scss' as v;
@use '@mskcc/fundamentals/src/_mixins.scss' as m;
@use '@mskcc/colors' as c;
@use '@carbon/styles/scss/components/form';
@use '@carbon/styles/scss/components/stack';

@mixin msk-form {
    @include form.form;
    @include stack.stack;

    /* Global */

    input[type='number'] {
        font-family: v.$msk--global-font-family;
    }

    // default fieldset
    .#{$prefix}--fieldset {
        border: 0;
        margin-top: v.$msk-form-vertical-space;
        padding: 0;
    }

    // default labels for inputs
    .#{$prefix}--label {
        --#{$prefix}-label-01-font-size: #{v.$msk--size-2};
        --#{$prefix}-label-01-font-weight: 400;
        --#{$prefix}-label-01-line-height: 1.2;
        --#{$prefix}-text-secondary: #{tk.$msk--color-content-input-secondary};

        @include m.msk-input-label-text;
    }

    .msk-validation-msg {
        display: flex;
        margin-top: m.msk-rem(6px);
        color: tk.$msk--color-content-error;

        .msk-validation-msg--icon {
            margin: 0 m.msk-rem(8px) 0 m.msk-rem(2px);
            color: tk.$msk--color-content-error;
        }

        .cds--form-requirement {
            display: block;
            overflow: visible;
            max-height: 100%;
            margin-top: 0;
        }
    }

    .#{$prefix}--form-requirement {
        font-size: v.$msk--size-2;
    }

    // and helper text
    .#{$prefix}--form__helper-text {
        @include m.msk-input-helper-text;
    }

    // labels and helper text
    .#{$prefix}--form-item {
        .#{$prefix}--text-input {
            @include m.msk-input-default;
        }
        .#{$prefix}--label {
            --#{$prefix}-label-01-font-size: #{v.$msk--size-2};
            --#{$prefix}-label-01-font-weight: 400;
            --#{$prefix}-label-01-line-height: 1.2;
            --#{$prefix}-text-secondary: #{c.$msk--gray-100};

            @include m.msk-input-label-text;
        }

        .#{$prefix}--form__helper-text {
            @include m.msk-input-helper-text;
        }

        input[data-invalid]:not(:focus),
        .#{$prefix}--number[data-invalid] input[type='number']:not(:focus),
        .#{$prefix}--text-input__field-wrapper[data-invalid]
            > .#{$prefix}--text-input--invalid:not(:focus),
        .#{$prefix}--text-area__wrapper[data-invalid]
            > .#{$prefix}--text-area--invalid:not(:focus),
        .#{$prefix}--select-input__wrapper[data-invalid]
            .#{$prefix}--select-input:not(:focus),
        .#{$prefix}--list-box[data-invalid]:not(
                .#{$prefix}--multi-select--invalid--focused
            ),
        .#{$prefix}--combo-box[data-invalid]:not(
                .#{$prefix}--multi-select--selected
            )
            .#{$prefix}--text-input:not(:focus) {
            @include m.msk-input-invalid;
        }

        // hide the carbon icon that is shown at the end of the input
        .#{$prefix}--text-input__invalid-icon {
            visibility: hidden;
        }
    }

    // invalid
    input[data-invalid],
    .#{$prefix}--number[data-invalid] .#{$prefix}--number__input-wrapper,
    .#{$prefix}--date-picker-input__wrapper,
    .#{$prefix}--date-picker-input__wrapper--invalid,
    .#{$prefix}--time-picker--invalid,
    .#{$prefix}--text-input__field-wrapper[data-invalid],
    .#{$prefix}--text-area__wrapper[data-invalid],
    .#{$prefix}--select-input__wrapper[data-invalid],
    .#{$prefix}--time-picker[data-invalid],
    .#{$prefix}--list-box[data-invalid] {
        ~ .#{$prefix}--form-requirement {
            --#{$prefix}-text-error: #{tk.$msk--color-content-error};
        }
    }
}