// ============================================================================
// Input Group Component
// Bootstrap-compatible input groups with addons
// ============================================================================

@use "../../../dev" as *;

// ============================================================================
// Mixins
// ============================================================================

/// Base input group mixin
/// @group Forms.InputGroup
@mixin input_group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;

    // Inputs, selects, textareas
    > .formfield__input,
    > .input,
    > select,
    > textarea {
        position: relative;
        flex: 1 1 auto;
        width: 1%;
        min-width: 0;

        // Remove border radius when between addons
        &:not(:first-child) {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        &:not(:last-child) {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
    }
}

/// Small input group variant mixin
/// @group Forms.InputGroup
@mixin input_group--sm {
    > .formfield__input,
    > .input,
    > .input_group__text,
    > .button {
        padding: q(4) q(8);
        font-size: var(--font-size-12);
    }
}

/// Large input group variant mixin
/// @group Forms.InputGroup
@mixin input_group--lg {
    > .formfield__input,
    > .input,
    > .input_group__text,
    > .button {
        padding: q(12) q(20);
        font-size: var(--font-size-18);
    }
}

/// Input group text addon mixin
/// @group Forms.InputGroup
@mixin input_group__text {
    display: flex;
    align-items: center;
    padding: q(8) q(12);
    font-size: var(--font-size-14);
    font-weight: 400;
    line-height: 1.5;
    color: var(--color_text_primary);
    text-align: center;
    white-space: nowrap;
    background-color: var(--color_fill_02);
    border: q(1) solid var(--color_border_01);
    border-radius: var(--primitive-corner-radius-02);

    // Remove border radius when adjacent to inputs
    &:not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-right: 0;
    }

    &:not(:first-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-left: 0;
    }
}

/// Input group button styling mixin
/// @group Forms.InputGroup
@mixin input_group--buttons {
    > .button {
        position: relative;
        z-index: 2;

        &:not(:last-child) {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        &:not(:first-child) {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            margin-left: q(-1);
        }

        &:focus {
            z-index: 5;
        }
    }
}

/// Input group focus styling mixin
/// @group Forms.InputGroup
@mixin input_group--focus {
    > .formfield__input:focus,
    > .input:focus {
        z-index: 5;
    }
}

/// Input group border handling mixin
/// @group Forms.InputGroup
@mixin input_group--borders {
    > :not(:first-child):not(.dropdown__menu):not(
            .input_group__text + .input_group__text
        ) {
        margin-left: q(-1);
    }
}