@use 'sass:map';
@use '../../base' as *;
@use 'igniteui-theming/sass/animations/easings' as *;

/// @deprecated Use the `css-vars` mixin instead.
/// @see {mixin} css-vars
/// @param {Map} $theme - The theme used to style the component.
@mixin input-group($theme) {
    @include css-vars($theme);

    // The --variant CSS produced by css-vars is needed also
    // when dynamically switching between the input `type` attribute.
    $variant: map.get($theme, '_meta', 'theme');
    $transition-timing: .25s $out-cubic;
    $material-theme: $variant == 'material';
    $indigo-theme: $variant == 'indigo';
    $fluent-theme: $variant == 'fluent';
    $bootstrap-theme: $variant == 'bootstrap';

    $required-symbol: '*';
    $required-symbol-margin: rem(2px);

    $bootstrap-inline-padding: (
        'comfortable': rem(14px),
        'cosy': rem(10px),
        'compact': rem(8px)
    );

    $bootstrap-block-padding: (
        'comfortable': rem(8px),
        'cosy': rem(6px),
        'compact': rem(4px)
    );

    $input-top-padding: rem(20px);
    $input-bottom-padding: rem(6px);

    $hint-spacing-block: map.get((
        'material': rem(4px),
        'fluent': rem(5px),
        'bootstrap': rem(4px),
        'indigo': rem(4px),
    ), $variant);

    $hint-spacing-inline: map.get((
        'material': sizable(rem(12px), rem(14px), rem(16px)),
        'fluent': 0,
        'bootstrap': 0,
        'indigo': 0,
    ), $variant);

    $hint-min-size: map.get((
        'material': rem(18px),
        'fluent': rem(18px),
        'bootstrap': rem(20px),
        'indigo': rem(15px),
    ), $variant);

    $material-box-top-padding: sizable(rem(16px), rem(20px), rem(24px));
    $material-border-top-padding: sizable(rem(8px), rem(12px), rem(16px));

    $textarea-padding: map.get((
        'material': sizable(rem(8px), rem(12px), rem(16px)),
        'fluent': sizable(rem(6px), rem(10px), rem(14px)),
        'bootstrap': sizable(rem(4px), rem(8px), rem(12px)),
        'indigo': sizable(rem(4px), rem(6px), rem(8px)),
    ), $variant);

    $textarea-font: map.get((
        'material': 'var(--ig-subtitle-1-line-height)',
        'fluent': 'var(--ig-body-2-line-height)',
        'bootstrap': 'var(--ig-body-1-line-height)',
        'indigo': 'var(--ig-body-2-line-height)',
    ), $variant);

    // Base Start
    %form-group-prefix--upload {
        padding: 0;
    }

    %form-group-prefix {
        color: var-get($theme, 'input-prefix-color');
        background: var-get($theme, 'input-prefix-background');
        grid-area: 1 / 1 / auto / auto;
    }

    %form-group-suffix {
        color: var-get($theme, 'input-suffix-color');
        background: var-get($theme, 'input-suffix-background');
        grid-area: 1 / 3 / auto / auto;
    }

    %form-group-prefix,
    %form-group-suffix {
        position: relative;
        display: inline-flex;
        width: max-content;
        align-items: center;
        min-height: 100% !important;
        transition: color $transition-timing, background $transition-timing;

        &:not(:empty) {
            @if $material-theme {
                padding-inline: pad-inline(rem(12px), rem(14px), rem(16px));
            } @else if $indigo-theme {
                padding-inline: pad-inline(rem(2px), rem(4px), rem(6px));
            } @else {
                padding-inline: pad-inline(rem(8px), rem(10px), rem(14px));
            }
        }
    }

    @if $variant == 'material' {
        %form-group-display--border {
            &:has(input:-webkit-autofill, input:autofill) {
                %igx-input-group__notch--border {
                    border-block-start-color: transparent;
                }

                %form-group-label {
                    --label-position: #{sizable(18px, 22px, 26px)};

                    transform: translateY(calc(var(--label-position) * -1));
                    margin-top: 0;
                    overflow: hidden;
                    will-change: font-size, color, transform;
                }
            }
        }
    }

    %form-group-display--box {
        %form-group-border {
            margin-bottom: 0;
        }
    }

    %form-group-display {
        @include sizable();
        --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
        --input-size: var(--component-size);
        --input-icon: #{sizable(rem(14px), rem(16px), rem(16px))};

        position: relative;
        display: block;
        color: var-get($theme, 'idle-text-color');

        igx-prefix,
        [igxPrefix] {
            @extend %form-group-prefix;
            outline-style: none;
            cursor: default;

            &:first-child {
                @if $variant == 'fluent' {
                    border-start-start-radius: calc(var-get($theme, 'border-border-radius') - var(--_fluent-input-border-size));
                    border-end-start-radius: calc(var-get($theme, 'border-border-radius') - var(--_fluent-input-border-size));
                } @else if $variant == "indigo" {
                    border-start-start-radius: var-get($theme, 'box-border-radius');
                }
            }
        }

        igx-suffix,
        [igxSuffix] {
            @extend %form-group-suffix;
            outline-style: none;
            cursor: default;

            &:last-child {
                @if $variant == 'fluent' {
                    border-start-end-radius: calc(var-get($theme, 'border-border-radius') - var(--_fluent-input-border-size));
                    border-end-end-radius: calc(var-get($theme, 'border-border-radius') - var(--_fluent-input-border-size));
                } @else if $variant == "indigo" {
                    border-start-end-radius: var-get($theme, 'box-border-radius');
                }
            }
        }

        input,
        textarea {
            font: inherit;
            margin: 0;
        }

        span {
            font-family: inherit;
        }

        textarea {
            overflow: auto;
        }

        input[type='number'] {
            -moz-appearance: textfield;
        }

        // Don't show the number spinner
        input[type='number']::-webkit-inner-spin-button {
            -webkit-appearance: none;
            height: auto;
        }

        input[type='search']::-webkit-search-cancel-button,
        input[type='search']::-webkit-search-decoration {
            -webkit-appearance: none;
        }

        igx-icon,
        igx-icon[igxPrefix],
        igx-icon[igxSuffix] {
            --component-size: var(--input-size);

            @if $variant == 'indigo' {
                --size: var(--input-icon) !important;
            }
        }

        @if $variant == 'material' {
            &:not(%form-group-display--border) {
                &:has(input:-webkit-autofill, input:autofill) {
                    %form-group-label {
                        --floating-label-position: -73%;

                        @include type-style('caption');

                        transform: translateY(var(--floating-label-position));
                    }
                }
            }

            &:not(%form-group-display--focused, %form-group-display--filled) {
                &:has(input:not(:placeholder-shown, [type='file'])) {
                    %form-group-label {
                        @include type-style('subtitle-1');
                        transform: translateY(0);
                    }
                }
            }
        }
    }

    %form-group-placeholder {
        &:has(input:placeholder-shown, textarea:placeholder-shown) {
            %form-group-label {
                transition: none !important;
            }
        }
    }

    %form-group-display:not(%form-group-display--filled) {
        %form-group-label {
            transition: all $transition-timing;
        }
    }

    %form-group-display--no-margin {
        margin-block-start: 0;
    }

    %form-group-display--filled {
        color: var-get($theme, 'input-prefix-color--filled');

        igx-prefix,
        [igxPrefix] {
            color: var-get($theme, 'input-prefix-color--filled');
            background: var-get($theme, 'input-prefix-background--filled');
        }

        igx-suffix,
        [igxSuffix] {
            color: var-get($theme, 'input-suffix-color--filled');
            background: var-get($theme, 'input-suffix-background--filled');
        }
    }

    %form-group-display--focused {
        color: var-get($theme, 'input-prefix-color--focused');

        igx-prefix,
        [igxPrefix] {
            color: var-get($theme, 'input-prefix-color--focused');
            background: var-get($theme, 'input-prefix-background--focused');
        }

        igx-suffix,
        [igxSuffix] {
            color: var-get($theme, 'input-suffix-color--focused');
            background: var-get($theme, 'input-suffix-background--focused');
        }
    }

    %form-group-display--readonly:not(%form-group-display--file) {
        igx-prefix,
        [igxPrefix],
        igx-suffix,
        [igxSuffix] {
            color: var-get($theme, 'disabled-text-color');

            @if $variant == 'fluent' {
                background: transparent;
            }

            @if $variant == 'bootstrap' {
                background: var-get($theme, 'border-disabled-background');
            }
        }

        @if $variant == 'bootstrap' {
            %form-group-input {
                background: var-get($theme, 'border-disabled-background');
            }
        }

        %form-group-bundle--hover::after {
            @if $variant == 'material' {
                border-block-end-color: var-get($theme, 'idle-bottom-line-color');
            }
        }

        @if $variant == 'indigo' {
            %form-group-bundle--hover:not(:focus-within) {
                background: unset;

                &::after {
                    border-block-end-color: var-get($theme, 'disabled-text-color');
                }
            }
        }

        &%igx-input-group-fluent:not(:focus-within) {
            %form-group-bundle--hover::before {
                box-shadow: inset 0 0 0 var(--_fluent-input-border-size) var-get($theme, 'border-color');
            }
        }

        &%form-group-display--box:not(%form-group-display--disabled) {
            %form-group-bundle {
                background: var-get($theme, 'box-background-focus');
            }
        }

        &%form-group-display--border:not(%form-group-display--disabled) {
            %form-group-bundle:hover:not(:focus-within) {
                %form-group-bundle-start,
                %igx-input-group__filler,
                %form-group-bundle-end {
                    border-color: var-get($theme, 'border-color');
                }

                %igx-input-group__notch {
                    border-block-start-color: var-get($theme, 'border-color');
                    border-block-end-color: var-get($theme, 'border-color');
                }
            }
        }

        &%form-group-display--search {
            %form-group-bundle-search--hover:not(:focus-within) {
                box-shadow: var-get($theme, 'search-resting-elevation');
            }
        }

        &:hover {
            %form-group-input--hover {
                cursor: default;
                color: var-get($theme, 'filled-text-color');

                &:not(:focus-within) {
                    &::placeholder {
                        color: var-get($theme, 'placeholder-color');
                    }
                }
            }
        }
    }

    %form-group-display--disabled {
        pointer-events: none;
        user-select: none;
        color: var-get($theme, 'disabled-text-color');

        igx-prefix,
        [igxPrefix] {
            @extend %form-group-prefix--disabled;
        }

        igx-suffix,
        [igxSuffix] {
            @extend %form-group-suffix--disabled;
        }
    }

    %form-group-box-wrapper {
        @if $variant != 'bootstrap' {
            border-radius: var-get($theme, 'box-border-radius');
        }

        @if $variant == 'material' {
            border-end-start-radius: 0;
            border-end-end-radius: 0;
        }
        overflow: hidden;
    }

    %form-group-bundle {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-area: 1 / 2 / span 1 / span 2;
        height: var-get($theme, 'size');
        position: relative;
        max-width: 100%;
        font-size: rem(16px);

        &::after {
            content: '';
            position: absolute;
            bottom: 0%;
            width: 100%;
            border-block-end: rem(1px) solid var-get($theme, 'idle-bottom-line-color');
            transition: all $transition-timing
        }

        %form-group-bundle-start {
            border: {
                start: {
                    start-radius: calc(var-get($theme, 'box-border-radius') - rem(1px));
                };
            }
        }

        %form-group-bundle-end {
            border: {
                start: {
                    end-radius: calc(var-get($theme, 'box-border-radius') - rem(1px));
                }
            }
        }
    }

    // We need to target the bundle :after here with classes since we have cases that
    // The theme is for example indigo but the input stays fluent, that's the case in the grid.
    .igx-input-group--fluent,
    .igx-input-group--bootstrap {
        %form-group-bundle {
            &::after {
                display: none;
            }
        }
    }

    %form-group-bundle--hover {
        &::after {
            border-block-end-width: rem(1px);
            border-block-end-color: var-get($theme, 'hover-bottom-line-color');
        }
    }

    %form-group-bundle--focus {
        &::after {
            @if $variant != 'indigo' {
                border-block-end-width: rem(2px);
            }
            border-block-end-color: var-get($theme, 'focused-bottom-line-color');
        }

        @if $variant == 'indigo' {
            caret-color: var-get($theme, 'focused-bottom-line-color');
        }
    }

    %form-group-bundle--success {
        &::after {
            border-block-end-color: var-get($theme, 'success-secondary-color');
        }
        caret-color: initial;
    }

    %form-group-bundle--warning {
        &::after {
            border-block-end-color: var-get($theme, 'warning-secondary-color');
        }
        caret-color: initial;
    }

    %form-group-bundle--disabled {
        cursor: default;

        &::after {
            border-block-end-color: var-get($theme, 'disabled-bottom-line-color');
            border-block-end-style: dashed;
        }
    }

    %form-group-bundle-start {
        grid-area: 1 / 1;
    }

    %form-group-bundle-main {
        grid-area: 1 / 2 / span 1 / span 2;
        flex-grow: 1;
        position: relative;
        max-width: inherit;
    }

    @if $material-theme {
        %form-group-display--file {
            %form-group-file-input {
                padding-inline: rem(4px);
            }
        }

        %form-group-display--file-border {
            %form-group-input {
                z-index: 2;
            }

            // We need this otherwise we have to use !important
            %form-group-bundle {
                grid-template-columns: auto auto auto 1fr auto;

                %form-group-bundle-end {
                    grid-area: 1 / 5;
                }

                &:hover {
                    %upload-button {
                        border-color: var-get($theme, 'hover-border-color');
                    }
                }
            }

            %upload-button {
                border-block: rem(1px) solid var-get($theme, 'border-color');

                .igx-button {
                    border: none;
                }
            }
        }

        %form-group-display--file-border-focused {
            %upload-button {
                border-width: rem(2px);
                border-color: var-get($theme, 'focused-border-color');
            }

            %form-group-bundle {
                &:hover {
                    %upload-button {
                        border-color: var-get($theme, 'focused-border-color');
                    }
                }
            }
        }

        %form-group-display--file-border-success {
            %upload-button {
                border-color: var-get($theme, 'success-secondary-color');
            }

            %form-group-bundle {
                &:hover {
                    %upload-button {
                        border-color: var-get($theme, 'success-secondary-color');
                    }
                }
            }
        }

        %form-group-display--file-border-warning {
            %upload-button {
                border-color: var-get($theme, 'warning-secondary-color');
            }

            %form-group-bundle {
                &:hover {
                    %upload-button {
                        border-color: var-get($theme, 'warning-secondary-color');
                    }
                }
            }
        }

        %form-group-display--file-border-error {
            %upload-button {
                border-color: var-get($theme, 'error-secondary-color');
            }

            %form-group-bundle {
                &:hover {
                    %upload-button {
                        border-color: var-get($theme, 'error-secondary-color');
                    }
                }
            }
        }
    }

    %form-group-display--file {
        %form-group-bundle {
            grid-template-columns: auto auto auto 1fr auto;
        }

        %form-group-file-input {
            grid-area: 1/3 / span 1 / span 2;
            flex-grow: 1;
            padding-inline: rem(4px);
            cursor: pointer;

            @if $variant != 'material' {
                display: flex;
                align-items: center;

                span {
                    transform: revert;
                    inset: revert;
                }
            }
        }

        %igx-input-group__notch {
            grid-area: 1 / 3;
        }

        %form-group-bundle-end {
            grid-area: 1 / 5;
        }

        %igx-input-group__filler {
            grid-area: 1 / 4;
        }

        %form-group-bundle-end {
            grid-area: 1 / 5;
        }

        %form-group-bundle-main {
            display: contents;
        }

        %form-group-input {
            grid-column: 2 / -2;
            grid-row: 1 / -1;
            border: none;
            inset: 0;
            width: 100%;
            appearance: none;
            opacity: 0;
            z-index: 2;
            cursor: pointer;
        }

        ::file-selector-button {
            cursor: pointer;
        }
    }

    %upload-button {
        display: flex;
        align-items: center;
        grid-area: 1 / 2;
        pointer-events: none;
        height: var-get($theme, 'size');
        cursor: pointer;
        overflow: hidden;
    }

    %form-group-display--bootstrap-file {
        %form-group-bundle-start,
        %form-group-bundle-end {
            [igxPrefix],
            igx-prefix {
                height: var-get($theme, 'size');
            }
        }
    }

    %bootstrap-upload-button {
        border: rem(1px) solid var-get($theme, 'border-color');
        border-inline-end: 0;

        igx-button {
            border: 0;
        }
    }

    %bootstrap-file-disabled-upload-button {
        border-color: var-get($theme, 'disabled-border-color');
    }

    %bootstrap-file-focused,
    %bootstrap-file-valid,
    %bootstrap-file-warning,
    %bootstrap-file-invalid {
        %form-group-bundle {
            border-radius: var-get($theme, 'border-border-radius');
            transition: box-shadow .15s ease-out, border .15s ease-out;

            &:hover {
                %form-group-file-input {
                    box-shadow: none;
                }
            }
        }

        %form-group-file-input {
            box-shadow: none;
        }
    }

    %bootstrap-file-focused {
        %form-group-bundle-start,
        %form-group-bundle-end,
        %upload-button {
            border-color: var-get($theme, 'focused-border-color');
        }

        %form-group-bundle {
            box-shadow: 0 0 0 rem(4px) var-get($theme, 'focused-secondary-color');
        }
    }

    %bootstrap-file-valid {
        %form-group-bundle-start,
        %form-group-bundle-end,
        %upload-button {
            border-color: var-get($theme, 'success-secondary-color');
        }
    }

    %bootstrap-file-warning {
        %form-group-bundle-start,
        %form-group-bundle-end,
        %upload-button {
            border-color: var-get($theme, 'warning-secondary-color');
        }
    }

    %bootstrap-file-invalid {
        %form-group-bundle-start,
        %form-group-bundle-end,
        %upload-button {
            border-color: var-get($theme, 'error-secondary-color');
        }
    }

    %bootstrap-file-valid-focused {
        %form-group-bundle {
            box-shadow: 0 0 0 rem(4px) var-get($theme, 'success-shadow-color');
        }

        %form-group-prefix:not(:first-child) {
            border-inline-start-color: var-get($theme, 'success-secondary-color');
        }

        %form-group-suffix:not(:last-child) {
            border-inline-end-color: var-get($theme, 'success-secondary-color');
        }
    }

    %bootstrap-file-warning-focused {
        %form-group-bundle {
            box-shadow: 0 0 0 rem(4px) color($color: 'warn', $variant: '500', $opacity: .38);

            %form-group-prefix:not(:first-child) {
                border-inline-start-color: var-get($theme, 'warning-secondary-color');
            }

            %form-group-suffix:not(:last-child) {
                border-inline-end-color: var-get($theme, 'warning-secondary-color');
            }
        }
    }

    %bootstrap-file-invalid-focused {
        %form-group-bundle {
            box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
        }

        %form-group-prefix:not(:first-child) {
            border-inline-start-color: var-get($theme, 'error-secondary-color');
        }

        %form-group-suffix:not(:last-child) {
            border-inline-end-color: var-get($theme, 'error-secondary-color');
        }
    }

    @if $variant == 'bootstrap' {
        %form-group-display--file-focused {
            %form-group-bundle-start,
            %form-group-bundle-end,
            %upload-button {
                border-color: var-get($theme, 'focused-border-color');
            }

            %form-group-prefix:not(:first-child) {
                border-inline-start-color: var-get($theme, 'focused-border-color');
            }

            %form-group-suffix:not(:last-child) {
                border-inline-end-color: var-get($theme, 'focused-border-color');
            }
        }
    }

    .igx-input-group--bootstrap:not(.igx-input-group--prefixed) {
        .igx-input-group__upload-button {
            border-radius: var-get($theme, 'border-border-radius') 0 0 var-get($theme, 'border-border-radius');
        }

        .igx-input-group__file-input {
            border-start-start-radius: 0;
            border-end-start-radius: 0;
        }
    }

    %form-group-bundle--box {
        // padding 0 is needed here because of the search variant
        padding: 0 !important;

        background: var-get($theme, 'box-background');

        &:hover {
            background: var-get($theme, 'box-background-hover');
        }
    }

    %form-group-bundle--box-focus {
        background: var-get($theme, 'box-background-focus');
    }

    %form-group-bundle--box-disabled {
        background-color: var-get($theme, 'box-disabled-background');
    }

    @if $material-theme {
        %form-group-bundle-main,
        %igx-input-group__notch {
            padding-inline: rem(4px);
        }
    }

    %igx-input-group__notch {
        display: flex;
        align-items: center;
        width: auto;
        min-width: 0;
        height: 100%;
        position: relative;

        grid-area: 1 / 2;

        %form-group-label {
            color: var-get($theme, 'idle-secondary-color');
        }
    }

    %igx-input-group__notch--border {
        padding: 0 rem(4px);
    }

    %igx-input-group__filler {
        grid-area: 1 / 3;
    }

    %form-group-bundle-end {
        grid-area: 1 / 4;
    }


    %form-group-bundle-start,
    %form-group-bundle-end {
        display: flex;
        align-items: center;
        min-width: 0;
        min-height: 100%;

        @if $variant == 'material' {
            overflow: hidden;
            min-width: pad(rem(8px), rem(10px), rem(12px));
        }
    }

    %form-group-bundle--border {
        grid-template-columns: auto auto 1fr auto;
        display: grid;
        align-items: initial;
        padding: 0;
        box-shadow: none;
        border-radius: var-get($theme, 'border-border-radius');
        background: var-get($theme, 'border-background');

        %form-group-bundle-start {
            width: auto;
            flex-shrink: 0;

            border: {
                color: var-get($theme, 'border-color');
                style: solid;

                inline: {
                    start-width: rem(1px);
                    end-width: 0;
                };

                block: {
                    start-width: rem(1px);
                    end-width: rem(1px);
                };

                start: {
                    start-radius: var-get($theme, 'border-border-radius');
                };

                end: {
                    start-radius: var-get($theme, 'border-border-radius');
                };
            }
        }

        %igx-input-group__filler {
            border: {
                width: rem(1px);
                style: solid;
                color: var-get($theme, 'border-color');
                left: none;
                right: none;
            }
        }

        %igx-input-group__notch {
            border-block-start: rem(1px) solid var-get($theme, 'border-color');
            border-block-end: rem(1px) solid var-get($theme, 'border-color');
            overflow: visible;

            %form-group-label {
                position: relative;
            }

            &:empty {
                display: none;
            }
        }

        %form-group-bundle-end {
            display: flex;
            justify-content: flex-end;
            flex-grow: 1;
            height: 100%;
            grid-area: 1 / 4;

            border: {
                color: var-get($theme, 'border-color');
                style: solid;

                inline: {
                    start-width: 0;
                    end-width: rem(1px);
                };

                block: {
                    start-width: rem(1px);
                    end-width: rem(1px);
                };

                start: {
                    end-radius: var-get($theme, 'border-border-radius');
                };

                end: {
                    end-radius: var-get($theme, 'border-border-radius');
                };
            }
        }

        %form-group-prefix,
        %form-group-suffix {
            height: 100%;
        }

        &::after {
            display: none;
        }

        &:hover {
            %form-group-bundle-start,
            %igx-input-group__filler,
            %form-group-bundle-end {
                border-color: var-get($theme, 'hover-border-color');
            }

            %igx-input-group__notch {
                border-block-start-color: var-get($theme, 'hover-border-color');
                border-block-end-color: var-get($theme, 'hover-border-color');
            }
        }
    }

    %form-group-bundle-border--disabled {
        background: var-get($theme, 'border-disabled-background');
    }

    %form-group-input--border {
        width: 100%;
        height: 100% !important;
        padding-block: 0;
        border: none;
        outline-style: none;
        z-index: 1;
    }

    /* stylelint-disable */
    %igx-input-group__notch--search,
    %form-group-bundle-main--search {
        @if $material-theme {
            padding-inline-start: pad-inline(rem(14px), rem(16px), rem(18px));
        }
    }

    %igx-input-group__notch--search,
    %form-group-bundle-main--search {
        @if $material-theme {
            padding-inline-end: pad-inline(rem(14px), rem(16px), rem(18px));
        }
    }
    /* stylelint-enable */

    %form-group-display--search {
        %igx-input-group__notch--search,
        %form-group-bundle-main--search {
            @if $variant == 'material' {
                padding-inline: rem(4px);
            }
        }
    }

    %form-group-bundle--search {
        background: var-get($theme, 'search-background');
        box-shadow: var-get($theme, 'search-resting-elevation');
        border-radius: var-get($theme, 'search-border-radius');

        @if $variant != 'bootstrap' {
            overflow: hidden;
        }

        @if $variant != 'indigo' {
            &::after {
                display: none;
            }
        }
    }

    %form-group-bundle-search--hover {
        box-shadow: var-get($theme, 'search-hover-elevation');
        border-color: var-get($theme, 'hover-border-color');
    }

    %form-group-bundle-search--focus {
        box-shadow: var-get($theme, 'search-hover-elevation');
        border-color: var-get($theme, 'hover-border-color');
    }

    %form-group-bundle-search--error {
        box-shadow: var-get($theme, 'search-hover-elevation');
        border-color: var-get($theme, 'search-hover-elevation');
    }

    %form-group-bundle-search--success {
        box-shadow: var-get($theme, 'search-hover-elevation');
        border-color: var-get($theme, 'search-hover-elevation');
    }

    %form-group-bundle-search--disabled {
        background: var-get($theme, 'search-disabled-background');
        box-shadow: var-get($theme, 'search-disabled-elevation');
        border-color: var-get($theme, 'disabled-border-color');

        igx-prefix,
        [igxPrefix],
        igx-suffix,
        [igxSuffix] {
            background: inherit;
            color: var-get($theme, 'disabled-text-color');
        }
    }

    %form-group-bundle-main--border {
        background: transparent;
        padding: 0 rem(4px);
        font-size: rem(16px);
    }

    %form-group-label {
        backface-visibility: hidden;
        will-change: transform;
        transform-origin: top left;
    }

    %form-group-label--border {
        padding-inline-end: 0;
        display: inline-block;
        position: relative;
        background: transparent;
    }

    %form-group-label--border,
    %form-group-label--search {
        transform: translateY(0);
    }

    %form-group-label--search {
        + %form-group-input--search {
            transform: translateY(0);
        }
    }

    @if $variant == 'material' {
        %form-group-label--float {
            --floating-label-position: -73%;

            @include type-style('caption');

            transform: translateY(var(--floating-label-position));
        }
    }

    %form-group-label--focused-border,
    %form-group-label--filled-border,
    %form-group-label--file-border {
        %igx-input-group__notch {
            border-block-start-color: transparent !important;
        }
    }

    %form-group-label--placeholder-border {
        &:has(input:placeholder-shown, textarea:placeholder-shown) {
            %igx-input-group__notch {
                border-block-start-color: transparent !important;
            }
        }
    }

    %form-group-label--focused-border {
        %form-group-bundle-start {
            border-inline-start-width: rem(2px);
            border-block-start-width: rem(2px);
            border-block-end-width: rem(2px);
            border-inline-start-color: var-get($theme, 'focused-border-color');
            border-block-start-color: var-get($theme, 'focused-border-color');
            border-block-end-color: var-get($theme, 'focused-border-color');
        }

        %form-group-bundle-end {
            border-inline-end-width: rem(2px);
            border-block-start-width: rem(2px);
            border-block-end-width: rem(2px);
            border-inline-end-color: var-get($theme, 'focused-border-color');
            border-block-start-color: var-get($theme, 'focused-border-color');
            border-block-end-color: var-get($theme, 'focused-border-color');
        }

        %igx-input-group__filler,
        %igx-input-group__notch {
            border-block-width: rem(2px);
        }

        %igx-input-group__filler {
            border-block-color: var-get($theme, 'focused-border-color');
        }

        %igx-input-group__notch {
            border-block-end-color: var-get($theme, 'focused-border-color');
        }

        %form-group-prefix {
            &:first-child {
                margin-inline-start: rem(-1px);
            }
        }

        %form-group-suffix {
            &:last-child {
                margin-inline-end: rem(-1px);
            }
        }
    }

    %form-group-label--focused-border:not(:is(
        %form-group-border--error,
        %form-group-border--warning,
        %form-group-border--success))
    {
        &:hover {
            %form-group-bundle-start,
            %form-group-bundle-end,
            %igx-input-group__filler,
            %igx-input-group__notch {
                border-color: var-get($theme, 'focused-border-color');
            }
        }
    }

    %form-group-label--float-border {
        --label-position: #{sizable(18px, 22px, 26px)};

        transform: translateY(calc(var(--label-position) * -1));
        margin-top: 0;
        overflow: hidden;
        will-change: font-size, color, transform;
    }

    @if $variant == 'material' {
        %textarea-group:not(%textarea-group--outlined) {
            --textarea-box-padding: #{pad-block(rem(8px), rem(12px), rem(16px))};

            &:has(%igx-input-group__notch:not(:empty)) {
                --textarea-box-padding: #{pad-block(rem(16px), rem(20px), rem(24px))};
            }

            %form-group-textarea {
                margin-block-end: rem(2px);
            }
        }

        %textarea-group:not(%suffixed) {
            %form-group-bundle-main {
                grid-area: 1 / 2 / span 1 / span 3;
                padding-inline-end: 0;
            }

            textarea {
                padding-inline-end: #{pad-inline(rem(12px), rem(14px), rem(16px))};
                width: calc(100% - #{rem(1px)});
            }
        }

        %textarea-group--outlined:not(%suffixed) {
            textarea {
                width: calc(100% - #{rem(2px)});
            }
        }

        %textarea-group:not(%form-group-display--focused, %form-group-display--filled) {
            &:has(textarea:not(:placeholder-shown)) {
                %form-group-textarea-label:not(%textarea-group-label--focused) {
                    @include type-style('subtitle-1');

                    top: calc(#{$material-box-top-padding} - #{rem(3px)});
                    transform: translateY(0);
                    margin-bottom: auto;
                }
            }
        }

        %textarea-group:not(%form-group-display--focused, %form-group-display--filled) {
            &:has(%form-group-display--border, textarea:not(:placeholder-shown)) {
                %igx-input-group__notch {
                    border-block-start-width: rem(1px);
                }
            }
        }
    }

    %form-group-textarea-group-bundle {
        height: auto !important;

        %form-group-label {
            position: absolute;
        }
    }

    @if $material-theme {
        %form-group-textarea-label {
            top: calc(#{$material-box-top-padding} - #{rem(1px)});
            margin-block-end: auto;
        }

        %textarea-group--outlined {
            %form-group-textarea-label {
                top: calc(#{$material-border-top-padding} - #{rem(3px)});
            }
        }

        %textarea-group--box {
            %form-group-textarea-label {
                top: calc(#{$material-box-top-padding} - #{rem(2px)});
            }
        }

        %textarea-group-label--focused {
            transform: translateY(0);
            top: calc(#{$textarea-padding} / 4);
        }

        %textarea-group-label--filled--border,
        %textarea-group-label--focused--border {
            top: 0;
            transform: translateY(-50%);
            margin-block-end: auto !important;
        }

        %textarea-group-notch--focused {
            border-block-start-width: rem(2px);
        }
    }

    %form-group-label--focus {
        color: var-get($theme, 'focused-secondary-color');
    }

    %form-group-label--warning {
        color: var-get($theme, 'warning-secondary-color');
    }

    %form-group-label--success {
        color: var-get($theme, 'success-secondary-color');
    }

    %form-group-label--required {
        &::after {
            content: '#{$required-symbol}';
            font-size: inherit;
            vertical-align: top;
            margin-inline-start: $required-symbol-margin; /* rem(2px) base is 16px */
            display: inline-block;
        }
    }

    %form-group-label--disabled {
        color: var-get($theme, 'disabled-text-color') !important;
    }

    %form-group-input {
        position: relative;
        display: block;
        border: none;
        padding-block-start: $input-top-padding;
        padding-block-end: $input-bottom-padding;
        padding-inline: 0;
        height: calc(var-get($theme, 'size') - 2px);
        width: 100%;
        min-width: 0;
        background: transparent;
        color: var-get($theme, 'filled-text-color');
        outline-style: none;
        box-shadow: none;
        overflow: hidden;
        text-overflow: ellipsis;

        &:not(%form-group-textarea, [type='date']) {
            line-height: 0 !important; /* Reset typography */
        }

        &::-webkit-input-placeholder {
            line-height: normal;
        }

        &::placeholder {
            color: var-get($theme, 'placeholder-color');
            opacity: 1;
            line-height: normal; /* Fix placeholder position in Safari */
        }

        @if $variant == 'indigo' {
            height: calc(var-get($theme, 'size') - 1px);

            &::placeholder {
                font-style: italic;
            }
        }
    }

    %igx-input-group__notch:empty + %form-group-bundle-main {
        %form-group-input {
            padding-block: 0;
        }
    }

    %form-group-file-input {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        padding-block-start: $input-top-padding;
        padding-block-end: $input-bottom-padding;
        height: var-get($theme, 'size');
        max-height: 100%;
        color: var-get($theme, 'filled-text-color');

        span {
            @include ellipsis();

            position: relative;
            display: inline-block;
            width: inherit;
            max-width: inherit;
            top: 50%;
            transform: translateY(-50%);
        }

        @if $variant == 'indigo' {
            font-size: rem(12px);
            line-height: rem(16px);
        }
    }

    // This is a hack that removes the autofill background and it's essential,
    // otherwise the background is on top of the floating label in material theme.
    // The !important flag is because bootstrap theme(and potentially feature themes) is overriding the transition delay.
    %autofill-background-fix {
        &:-webkit-autofill,
        &:-webkit-autofill:hover,
        &:-webkit-autofill:focus,
        &:-webkit-autofill:active,
        &:autofill,
        &:autofill:hover,
        &:autofill:focus,
        &:autofill:active {
            -webkit-transition-delay: 99999s !important;
            transition-delay: 99999s !important;
        }
    }

    %form-group-file-input-indigo {
        padding-block: 0;
    }

    %form-group-input--hover {
        color: var-get($theme, 'filled-text-hover-color');

        &::placeholder {
            color: var-get($theme, 'hover-placeholder-color');
        }
    }

    %form-group-input--focus {
        color: var-get($theme, 'focused-text-color');

        &::placeholder {
            color: var-get($theme, 'hover-placeholder-color');
        }
    }

    %form-group-input--disabled {
        cursor: default;

        color: var-get($theme, 'disabled-text-color');

        &::placeholder {
            color: var-get($theme, 'disabled-placeholder-color');
        }
    }

    %form-group-file-input--disabled {
        cursor: default;

        &::placeholder {
            color: var-get($theme, 'disabled-placeholder-color');
        }
    }

    %form-group-textarea {
        height: auto;
        resize: vertical;
        overflow: hidden;
        z-index: 1;
        padding-block-end: $textarea-padding;

        @if $material-theme {
            padding-block-start: 0;
        }
    }

    %form-group-textarea-group-bundle-main {
        overflow: hidden;

        @if $material-theme or $indigo-theme {
            height: calc(100% - #{rem(2px)});
            top: rem(1px);
        }

        @if $material-theme {
            padding-block-start: var(--textarea-box-padding);
        }
    }

    %textarea-group--outlined {
        %form-group-textarea-group-bundle-main {
            padding-block-start: #{$material-border-top-padding};
        }

        %form-group-textarea {
            inset-block-start: rem(-2px);
        }
    }

    %form-group-textarea--disabled {
        color: var-get($theme, 'disabled-text-color');
        cursor: default;

        &::placeholder {
            color: var-get($theme, 'disabled-placeholder-color');
        }
    }

    @if $material-theme {
        %form-group-line {
            position: absolute;
            width: 100%;
            inset-inline-end: 0;
            height: rem(2px);
            align-self: end;
            transform: scaleX(0);
            transform-origin: center;
            background: var-get($theme, 'focused-bottom-line-color');
            z-index: 1;
        }
    }

    %form-group-line--success {
        background: var-get($theme, 'success-secondary-color');
    }

    %form-group-border--success {
        %form-group-bundle-start {
            border-inline-start-color: var-get($theme, 'success-secondary-color');
            border-block-start-color: var-get($theme, 'success-secondary-color');
            border-block-end-color: var-get($theme, 'success-secondary-color');
        }

        %form-group-bundle-end {
            border-inline-end-color: var-get($theme, 'success-secondary-color');
            border-block-start-color: var-get($theme, 'success-secondary-color');
            border-block-end-color: var-get($theme, 'success-secondary-color');
        }

        %igx-input-group__notch,
        %igx-input-group__filler {
            border-block-color: var-get($theme, 'success-secondary-color');
        }

        %form-group-bundle--border:hover {
            %form-group-bundle-start,
            %form-group-bundle-end,
            %igx-input-group__filler,
            %igx-input-group__notch {
                border-color: var-get($theme, 'success-secondary-color');
            }
        }
    }

    %form-group-line--warning {
        background: var-get($theme, 'warning-secondary-color');
    }

    %form-group-border--warning {
        %form-group-bundle-start {
            border-inline-start-color: var-get($theme, 'warning-secondary-color');
            border-block-start-color: var-get($theme, 'warning-secondary-color');
            border-block-end-color: var-get($theme, 'warning-secondary-color');
        }

        %form-group-bundle-end {
            border-inline-end-color: var-get($theme, 'warning-secondary-color');
            border-block-start-color: var-get($theme, 'warning-secondary-color');
            border-block-end-color: var-get($theme, 'warning-secondary-color');
        }

        %igx-input-group__notch,
        %igx-input-group__filler {
            border-block-color: var-get($theme, 'warning-secondary-color');
        }

        %form-group-bundle--border:hover {
            %form-group-bundle-start,
            %form-group-bundle-end,
            %igx-input-group__filler,
            %igx-input-group__notch {
                border-color: var-get($theme, 'warning-secondary-color');
            }
        }
    }

    %form-group-border--error:not(%form-group-display--readonly),
    %form-group-border--error%form-group-display--file {
        %form-group-bundle-start {
            border-inline-start-color: var-get($theme, 'error-secondary-color');
            border-block-start-color: var-get($theme, 'error-secondary-color');
            border-block-end-color: var-get($theme, 'error-secondary-color');
        }

        %form-group-bundle-end {
            border-inline-end-color: var-get($theme, 'error-secondary-color');
            border-block-start-color: var-get($theme, 'error-secondary-color');
            border-block-end-color: var-get($theme, 'error-secondary-color');
        }

        %igx-input-group__notch,
        %igx-input-group__filler {
            border-block-color: var-get($theme, 'error-secondary-color');
        }

        %form-group-bundle--border:hover {
            %form-group-bundle-start,
            %form-group-bundle-end,
            %igx-input-group__filler,
            %igx-input-group__notch {
                border-color: var-get($theme, 'error-secondary-color');
            }
        }
    }

    %form-group-border--disabled {
        %form-group-bundle-start {
            border-inline-start-color: var-get($theme, 'disabled-border-color');
            border-block-start-color: var-get($theme, 'disabled-border-color');
            border-block-end-color: var-get($theme, 'disabled-border-color');
        }

        %form-group-bundle-end {
            border-inline-end-color: var-get($theme, 'disabled-border-color');
            border-block-start-color: var-get($theme, 'disabled-border-color');
            border-block-end-color: var-get($theme, 'disabled-border-color');
        }

        %igx-input-group__notch,
        %igx-input-group__filler {
            border-block-color: var-get($theme, 'disabled-border-color');
        }
    }

    %form-group-line--focus {
        transform: scaleX(1);
        transition: transform $transition-timing;
    }

    // Hides the border for border type input
    %form-group-line--hidden {
        display: none;
    }

    %form-group-helper {
        --ig-caption-margin-top: #{$hint-spacing-block};
        --ig-caption-margin-bottom: 0;
        --ig-body-2-margin-top: #{$hint-spacing-block};

        color: var-get($theme, 'helper-text-color');
        position: relative;
        display: grid;
        grid-auto-rows: minmax($hint-min-size, auto);
        padding-inline: pad-inline($hint-spacing-inline);
        justify-content: space-between;

        > * {
            margin-inline-end: rem(8px);

            &:last-child {
                margin-inline-end: 0;
            }
        }

        &:empty {
            display: none;
        }
    }

    @if $variant != 'indigo' {
        %form-group-helper--success {
            color: var-get($theme, 'success-secondary-color');
        }

        %form-group-helper--warning {
            color: var-get($theme, 'warning-secondary-color');
        }
    }

    %form-group-helper-item {
        @include line-clamp(2, true, true);

        overflow-wrap: anywhere;
        align-items: center;
        position: relative;
    }

    %form-group-helper-item--start {
        justify-content: flex-start;
    }

    %form-group-helper-item--end {
        justify-content: flex-end;
    }

    %form-group-helper-item--start,
    %form-group-helper-item--end {
        width: 100%;
    }

    %form-group-prefix--disabled,
    %form-group-suffix--disabled {
        color: var-get($theme, 'disabled-text-color');
        background: inherit;
        pointer-events: none;
    }

    %form-group-helper--disabled {
        color: var-get($theme, 'disabled-text-color');
    }

    // BASE END

    // ==============================================

    // INDIGO START
    @if $variant == 'indigo' {
        %form-group-display--search {
            igx-prefix,
            [igxPrefix],
            igx-suffix,
            [igxSuffix] {
                &:not(:empty) {
                    padding-inline: pad-inline(rem(6px), rem(8px), rem(10px));
                }
            }
        }

        %form-group-display.igx-input-group--prefixed,
        %form-group-display--search.igx-input-group--prefixed {
            input,
            textarea {
                padding-inline-start: 0;
            }
        }

        %form-group-display.igx-input-group--suffixed,
        %form-group-display--search.igx-input-group--suffixed {
            input,
            textarea {
                padding-inline-end: 0;
            }
        }
    }

    %form-group-bundle--indigo {
        border-radius: var-get($theme, 'box-border-radius') var-get($theme, 'box-border-radius') 0 0;
        transition: background $transition-timing;
        padding-top: 0;

        &:hover,
        &:focus {
            background: var-get($theme, 'box-background-hover');
        }
    }

    %indigo-label--focused {
        color: var-get($theme, 'focused-secondary-color');
    }

    %form-group-input--indigo {
        padding-block: rem(6px);
        padding-inline: pad-inline(rem(2px), rem(4px), rem(6px));
    }

    @if $variant == 'indigo' {
        %form-group-input--search {
            padding-inline: pad-inline(rem(6px), rem(8px), rem(10px));
        }
    }

    %indigo--box-focused {
        background: var-get($theme, 'box-background-focus');
    }

    %form-group-bundle--indigo--disabled {
        background: transparent;

        &:hover,
        &:focus {
            background: transparent;
        }

        &::after {
            border-bottom-style: solid;
        }
    }
    // INDIGO END

    // ==============================================

    // FLUENT START
    // Input
    %igx-input-group-fluent {
        igx-prefix,
        [igxPrefix] {
            @extend %form-group-prefix-fluent;
        }

        igx-suffix,
        [igxSuffix] {
            @extend %form-group-suffix-fluent;
        }

        igx-prefix,
        [igxPrefix],
        igx-suffix,
        [igxSuffix] {
            outline-style: none;
        }

        select {
            width: calc(100% + #{rem(8px)});
            margin-inline-start: rem(-8px) !important;
            cursor: pointer !important;
        }
    }

    %igx-input-group-fluent-search {
        display: flex;
        flex-direction: column;

        igx-prefix,
        [igxPrefix] {
            overflow: hidden;
        }

        igx-prefix,
        [igxPrefix] {
            background: var(--ig-input-group-input-prefix-background, transparent);
            color: var(--ig-input-group-input-prefix-color, var(--ig-primary-500));
        }

        igx-suffix,
        [igxSuffix] {
            background: var(--ig-input-group-input-suffix-background, transparent);
            color: var(--ig-input-group-input-suffix-color, var(--ig-primary-500));
        }

        &%form-group-display--readonly {
            igx-prefix,
            [igxPrefix],
            igx-suffix,
            [igxSuffix] {
                color: var(--ig-input-group-disabled-text-color, var(--ig-gray-500));
            }
        }
    }

    %igx-input-group-fluent-search--focused {
        igx-prefix,
        [igxPrefix] {
            display: none;
        }

        igx-suffix,
        [igxSuffix] {
            color: var(--ig-input-group-input-suffix-color--focused, var(--ig-gray-900));
        }

        &%form-group-display--readonly {
            igx-suffix,
            [igxSuffix] {
                color: var(--ig-input-group-input-suffix-color--focused, var(--ig-gray-900));
            }
        }
    }

    // Bundle
    %form-group-bundle-required--fluent {
        &::before {
            content: '*';
            position: absolute;
            top: rem(-8px);
            inset-inline-start: calc(100% + #{rem(4px)});
            color: var-get($theme, 'error-secondary-color');
        }
    }

    %form-group-bundle-bootstrap--textarea,
    %form-group-bundle-fluent--textarea {
        display: flex;
    }

    %form-group-label-required--fluent {
        &::after {
            color: var-get($theme, 'error-secondary-color');
        }
    }

    %form-group-label-required--disabled--fluent {
        &::after {
            color: var-get($theme, 'disabled-text-color');
        }
    }

    %form-group-bundle--fluent {
        --min-width: #{sizable(rem(4px), rem(6px), rem(8px))};
        --_fluent-input-border-size: #{rem(1px)};

        min-height: var-get($theme, 'size');
        padding: 0;
        background: var-get($theme, 'border-background');
        align-items: stretch;
        overflow: visible;
        border-radius: var-get($theme, 'border-border-radius');
        position: relative;
        border: rem(1px) solid transparent;

        &::before {
            content: '';
            position: absolute;
            width: calc(100% + var(--_fluent-input-border-size) * 2);
            height: calc(100% + var(--_fluent-input-border-size) * 2);
            pointer-events: none;
            user-select: none;
            inset: calc(var(--_fluent-input-border-size) * -1);
            z-index: 1;
            box-shadow: inset 0 0 0 var(--_fluent-input-border-size) var-get($theme, 'border-color');
            border-radius: inherit;
        }
    }

    %form-group-bundle--fluent--hover {
        &::before {
            box-shadow: inset 0 0 0 var(--_fluent-input-border-size) var-get($theme, 'hover-border-color');
        }
    }

    %form-group-bundle--fluent--focus {
        --_fluent-input-border-size: #{rem(2px)};

        &::before {
            box-shadow: inset 0 0 0 var(--_fluent-input-border-size) var-get($theme, 'focused-border-color');
        }

        &:hover {
            &::before {
                box-shadow: inset 0 0 0 var(--_fluent-input-border-size) var-get($theme, 'focused-border-color');
            }
        }
    }

    %form-group-bundle-success--fluent,
    %form-group-bundle-success--fluent--hover,
    %form-group-bundle-success--fluent--focus {
        &::before {
            box-shadow: inset 0 0 0 var(--_fluent-input-border-size) var-get($theme, 'success-secondary-color');
        }
    }

    %form-group-bundle--fluent--hover-disabled,
    %form-group-bundle--fluent-disabled {
        background: var-get($theme, 'border-disabled-background');

        &::before {
            box-shadow: inset 0 0 0 var(--_fluent-input-border-size) var-get($theme, 'disabled-border-color');
        }
    }

    %form-group-bundle-main--fluent {
        align-self: center;
        cursor: default;
    }

    %form-group-bundle-textarea-start--fluent,
    %form-group-bundle-textarea-end--fluent {
        &:empty {
            display: none;
        }
    }

    %form-group-display--invalid:not(%form-group-display--readonly),
    %form-group-display--invalid%form-group-display--file {
        @if $variant != 'indigo' {
            %form-group-label--error,
            %form-group-helper--error {
                color: var-get($theme, 'error-secondary-color');
            }
        }

        %form-group-line--error {
            background: var-get($theme, 'error-secondary-color');
        }

        %form-group-bundle--error {
            &::after {
                border-block-end-color: var-get($theme, 'error-secondary-color');
            }

            caret-color: initial;
        }

        &%form-group-display--bootstrap {
            %bootstrap-input--error {
                border: rem(1px) solid var-get($theme, 'error-secondary-color');

                &:focus {
                    box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
                }
            }
        }

        &%igx-input-group-fluent {
            %form-group-bundle-error--fluent,
            %form-group-bundle-error--fluent--hover,
            %form-group-bundle-error--fluent--focus {
                &::before {
                    box-shadow: inset 0 0 0 var(--_fluent-input-border-size) var-get($theme, 'error-secondary-color');
                }
            }
        }
    }

    // Native input
    %fluent-input {
        font-size: rem(14px);
        padding-block: 0;
        padding-inline: rem(8px);
        margin: 0;
        border: none;
    }

    %fluent-file-input {
        padding-inline: 0;
    }

    %indigo-textarea {
        padding-block: $textarea-padding;
        padding-inline: pad-inline(rem(2px), rem(4px), rem(6px));
        inset-block-end: rem(2px);
    }

    %fluent-textarea {
        padding-inline: pad-inline(rem(8px));
        padding-block: $textarea-padding;
    }

    %fluent-input-disabled {
        color: var-get($theme, 'disabled-text-color');
    }

    // Label
    %fluent-label {
        display: block;
        position: static;
        transform: translateY(0);
        transform-origin: top left;
        margin-top: 0 !important;
        height: auto;
        color: var-get($theme, 'idle-secondary-color');

        @if $variant == 'fluent' {
            margin-block-end: rem(5px);
        } @else {
            margin-block-end: rem(4px);
        }

        [dir='rtl'] & {
            transform-origin: top right;
        }
    }

    %fluent-label + %form-group-bundle-required--fluent {
        &::before {
            display: none;
        }
    }

    %fluent-label-success {
        color: var-get($theme, 'idle-secondary-color');
    }

    %fluent-label-error {
        color: var-get($theme, 'idle-secondary-color');
    }

    %fluent-label-disabled {
        color: var-get($theme, 'disabled-text-color');
    }

    %fluent-label-filled {
        transform: translateY(0);
    }

    %fluent-label-focused {
        transform: translateY(0) scale(1);
    }

    %fluent-placeholder-label {
        transform: translateY(0) scale(1);
    }

    %form-group-prefix-fluent,
    %form-group-suffix-fluent {
        .ig-typography [igx-button],
        .ig-typography igx-button,
        .ig-typography button,
        button {
            border-radius: 0;
            height: 100%;
        }
    }

    %form-group-prefix-fluent,
    %form-group-suffix-fluent,
    %form-group-prefix-fluent-search,
    %form-group-suffix-fluent-search {
        &:not(:empty) {
            padding-inline: pad-inline(rem(8px), rem(10px), rem(14px));
        }
    }

    // FLUENT END

    // ==============================================

    // === BOOTSTRAP START === //
    // Input group host
    %form-group-display--bootstrap-prefixed {
        %bootstrap-file-input,
        %bootstrap-input {
            border: {
                start: {
                    start-radius: 0;
                };
                end: {
                    start-radius: 0;
                };
            }
        }
    }

    %form-group-display--bootstrap-suffixed {
        %bootstrap-file-input,
        %bootstrap-input {
            border: {
                start: {
                    end-radius: 0;
                };
                end: {
                    end-radius: 0;
                };
            }
        }
    }

    %form-group-display--bootstrap-suffixed-focused {
        .igx-input-group__clear-icon + igx-suffix,
        .igx-input-group__clear-icon + [igxPrefix] {
            border-color: var-get($theme, 'focused-border-color');
        }
    }

    %form-group-display--bootstrap-suffixed-valid {
        .igx-input-group__clear-icon + igx-suffix,
        .igx-input-group__clear-icon + [igxPrefix] {
            border-color: var-get($theme, 'success-secondary-color');
        }
    }

    %form-group-display--bootstrap-suffixed-form-group-display--bootstrap-suffixed-warning {
        .igx-input-group__clear-icon + igx-suffix,
        .igx-input-group__clear-icon + [igxPrefix] {
            border-color: var-get($theme, 'warning-secondary-color');
        }
    }

    %form-group-display--bootstrap-suffixed-invalid {
        .igx-input-group__clear-icon + igx-suffix,
        .igx-input-group__clear-icon + [igxPrefix] {
            border-color: var-get($theme, 'error-secondary-color');
        }
    }

    %form-group-display--disabled-bootstrap {
        background-image: none;

        igx-prefix,
        [igxPrefix] {
            @extend %form-group-prefix--disabled-bootstrap;
        }

        igx-suffix,
        [igxSuffix] {
            @extend %form-group-suffix--disabled-bootstrap;
        }

        %form-group-bundle-start--bootstrap,
        %form-group-bundle-end--bootstrap {
            border-color: var-get($theme, 'disabled-border-color');
        }
    }

    // Bundle
    %form-group-bundle--bootstrap {
        padding: 0;
        box-shadow: none;
        z-index: 0;
    }

    %form-group-bundle--bootstrap-focused,
    %form-group-bundle--bootstrap-hover {
        border: none;
        box-shadow: none;
    }

    %form-group-bundle-start--bootstrap,
    %form-group-bundle-end--bootstrap {
        flex: none;
        border-width: rem(1px);
        border-style: solid;
        border-color: var-get($theme, 'border-color');
        overflow: hidden;

        &:empty {
            display: none;
        }
    }

    %form-group-bundle-start--bootstrap {
        grid-area: 1 / 1;

        border: {
            inline: {
                start-width: rem(1px);
                end-width: 0;
            };
            block: {
                start-width: rem(1px);
                end-width: rem(1px);
            };
            start: {
                start-radius: var-get($theme, 'border-border-radius');
            };
            end: {
                start-radius: var-get($theme, 'border-border-radius');
            };
        }
    }
    %form-group-bundle-end--bootstrap {
        grid-area: 1 / 3;

        border: {
            inline: {
                start-width: 0;
                end-width: rem(1px);
            };
            block: {
                start-width: rem(1px);
                end-width: rem(1px);
            };
            start: {
                end-radius: var-get($theme, 'border-border-radius');
            };
            end: {
                end-radius: var-get($theme, 'border-border-radius');
            };
        }
    }

    // Label
    %bootstrap-label {
        position: static;
        display: block;
        color: var-get($theme, 'idle-secondary-color');
        padding: 0;
        transform: translateY(0);
        transform-origin: top left;
        margin-block-start: 0 !important;
        margin-block-end: rem(4px);
        height: auto;

        [dir='rtl'] & {
            transform-origin: top right;
        }
    }

    // Native Input
    %bootstrap-input {
        height: auto;
        line-height: 1.5;
        grid-area: 1 / 2;
        margin: 0;
        z-index: 2;
        padding-block: pad-inline(
            map.get($bootstrap-block-padding, 'compact'),
            map.get($bootstrap-block-padding, 'cosy'),
            map.get($bootstrap-block-padding, 'comfortable')
        );
        padding-inline: pad-inline(
            map.get($bootstrap-inline-padding, 'compact'),
            map.get($bootstrap-inline-padding, 'cosy'),
            map.get($bootstrap-inline-padding, 'comfortable')
        );

        &:is(textarea) {
            padding-block: $textarea-padding;
        }
    }

    // The :not selector is needed otherwise bootstrap will override the %autofill-background-fix
    %form-group-display--bootstrap {
        :not(:has(input:-webkit-autofill, input:autofill)) {
            %bootstrap-input {
                transition: box-shadow .15s ease-out, border .15s ease-out;
            }
        }
    }

    %bootstrap-input,
    %bootstrap-file-input {
        border: rem(1px) solid var-get($theme, 'border-color');
        padding-block: pad-inline(
            map.get($bootstrap-block-padding, 'compact'),
            map.get($bootstrap-block-padding, 'cosy'),
            map.get($bootstrap-block-padding, 'comfortable')
        );
        padding-inline: pad-inline(
            map.get($bootstrap-inline-padding, 'compact'),
            map.get($bootstrap-inline-padding, 'cosy'),
            map.get($bootstrap-inline-padding, 'comfortable')
        );
        border-radius: var-get($theme, 'border-border-radius');

    }

    %bootstrap-file-input {
        height: inherit;
    }

    %bootstrap-input-file {
        grid-column: 2 / -2;
        grid-row: 1 / -1;
        height: var-get($theme, 'size');
    }

    %bootstrap-bundle-end {
        grid-area: 1 / 5;
    }

    %bootstrap-input--focus {
        border: rem(1px) solid var-get($theme, 'focused-border-color');
        box-shadow: 0 0 0 rem(4px) var-get($theme, 'focused-secondary-color');
    }

    %bootstrap-input--success {
        border: rem(1px) solid var-get($theme, 'success-secondary-color');

        &:focus {
            box-shadow: 0 0 0 rem(4px) var-get($theme, 'success-shadow-color');

            + %bootstrap-file-input {
                box-shadow: 0 0 0 rem(4px) var-get($theme, 'success-shadow-color');
            }
        }
    }

    %bootstrap-input--warning {
        border: rem(1px) solid var-get($theme, 'warning-secondary-color');
        box-shadow: 0 0 0 rem(4px) color($color: 'warn', $variant: '500', $opacity: .38);
    }

    %form-group-display:not(%form-group-display--file) {
        %bootstrap-input--error {
            border: rem(1px) solid var-get($theme, 'error-secondary-color');

            &:focus {
                box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');

                + %bootstrap-file-input {
                    box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
                }
            }
        }
    }

    %bootstrap-input--warning {
        border: rem(1px) solid var-get($theme, 'warning-secondary-color');

        &:focus {
            box-shadow: 0 0 0 rem(4px) color($color: 'warn', $variant: 500, $opacity: 0.38);

            + %bootstrap-file-input {
                box-shadow: 0 0 0 rem(4px) color($color: 'warn', $variant: 500, $opacity: 0.38);
            }
        }
    }

    %bootstrap-input--disabled {
        background: var-get($theme, 'border-disabled-background');
        border: rem(1px) solid var-get($theme, 'disabled-border-color');
        box-shadow: none;
    }

    %bootstrap-file-input--disabled {
        border: rem(1px) solid var-get($theme, 'disabled-border-color');
        box-shadow: none;
    }

    %bootstrap-input--search {
        transform: translateY(0);
    }

    %form-group-prefix--disabled-bootstrap,
    %form-group-suffix--disabled-bootstrap {
        background: var-get($theme, 'border-disabled-background');
        border-color: var-get($theme, 'disabled-border-color');
        color: var-get($theme, 'disabled-text-color');
    }

    %form-group-prefix--disabled-bootstrap:not(:first-child) {
        border-inline-start-color: var-get($theme, 'disabled-border-color');
    }

    %form-group-suffix--disabled-bootstrap:not(:last-child) {
        border-inline-end-color: var-get($theme, 'disabled-border-color');
    }

    @if $variant == 'bootstrap' {
        %form-group-prefix:not(:first-child) {
            border-inline-start: rem(1px) solid var-get($theme, 'border-color');
        }

        %form-group-suffix:not(:last-child) {
            border-inline-end: rem(1px) solid var-get($theme, 'border-color');
        }
    }
}

/// Adds typography styles for the igx-input-group component.
/// Uses the 'subtitle-1', 'caption'
/// category from the typographic scale.
/// @group typography
/// @param {Map} $categories [(helper-text: 'caption', input-text: 'subtitle-1')] - The categories from the typographic scale used for type styles.
@mixin input-group-typography(
    $categories: (
        helper-text: 'caption',
        input-text: 'subtitle-1'
    )
) {
    $helper-text: map.get($categories, 'helper-text');
    $input-text: map.get($categories, 'input-text');

    %form-group-input {
        @include type-style($input-text) {
            margin: 0;
        }
    }

    %form-group-helper {
        @include type-style($helper-text);
    }

    %form-group-prefix,
    %form-group-suffix {
        &:not(igx-icon) {
            @include type-style($input-text) {
                margin: 0;
            }
        }
    }
}