// ============================================================================
// Groups | Buttons
// ============================================================================

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

// ============================================================================
// Button Group Mixins
// ============================================================================

/// Base button group styling
/// @group ButtonGroup
@mixin button_group {
    display: inline-flex;
    flex-wrap: nowrap;

    > button,
    > .button {
        border-radius: 0;
        margin: 0;
        position: relative;

        // First button
        &:first-child {
            border-top-left-radius: var(--border_radius, q(4));
            border-bottom-left-radius: var(--border_radius, q(4));
        }

        // Last button
        &:last-child {
            border-top-right-radius: var(--border_radius, q(4));
            border-bottom-right-radius: var(--border_radius, q(4));
        }

        // Middle buttons - collapse borders to prevent double outline
        &:not(:first-child) {
            margin-left: calc(-1 * var(--button_border_width, 1px));
        }

        // Ensure hover/focus states appear above siblings
        &:hover,
        &:focus,
        &:active {
            z-index: 1;
        }
    }
}

/// Vertical button group with underscore naming
/// @group ButtonGroup
@mixin button_group--vertical {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;

    > button,
    > .button {
        border-radius: 0;
        margin: 0;
        width: 100%;

        // Collapse borders to prevent double outline
        &:not(:first-child) {
            margin-top: calc(-1 * var(--button_border_width, 1px));
        }

        &:first-child {
            border-top-left-radius: var(--primitive-corner-radius-04, q(4));
            border-top-right-radius: var(--primitive-corner-radius-04, q(4));
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        &:last-child {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            border-bottom-left-radius: var(--primitive-corner-radius-04, q(4));
            border-bottom-right-radius: var(
                --primitive-corner-radius-04,
                q(4)
            );
        }

        // Ensure hover/focus states appear above siblings
        &:hover,
        &:focus,
        &:active {
            z-index: 1;
        }
    }
}

/// Vertical button group with hyphen naming
/// @group ButtonGroup
@mixin button-group--vertical {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch; // ensures buttons fill the width

    > button,
    > .button {
        border-radius: 0;
        margin: 0;
        width: 100%;

        // Collapse borders to prevent double outline
        &:not(:first-child) {
            margin-top: calc(-1 * var(--button_border_width, 1px));
        }

        &:first-child {
            border-top-left-radius: var(--border_radius, q(4));
            border-top-right-radius: var(--border_radius, q(4));
        }

        &:last-child {
            border-bottom-left-radius: var(--border_radius, q(4));
            border-bottom-right-radius: var(--border_radius, q(4));
        }

        // Ensure hover/focus states appear above siblings
        &:hover,
        &:focus,
        &:active {
            z-index: 1;
        }
    }
}

// ============================================================================
// Utility Classes are defined in:
// src/scss/classes/body_molecules/navigation/_button_group.scss
// ============================================================================