/*------------------------------------*\
    BUTTON GROUP
\*------------------------------------*/

@use "../../base/helpers";
@use "../../base/settings";

.ds_button-group {
    display: flex;
    flex-wrap: wrap;
    
    @include helpers.ds_block-margins;
    @include helpers.ds_responsive-spacing(2, 'gap');

    // Remove margins as the group handles the layout
    .ds_button {
        align-content: center;
        margin: 0;
    }

    // Links and text buttons are vertically centred but not stretched to match the height of all buttons
    a:not(.ds_button),
    .ds_link {
        align-self: center;
    }

    // Mobile size behaviour
    @include helpers.ds_media-query(small-down) {

        // Default is to stack on mobile
        flex-direction: column;
        .ds_button {
            width: 100%;
        }
        // Modifier to keep buttons in a row
        &--inline {
            flex-direction: row;
            flex-wrap: nowrap;

            .ds_button {
                flex-grow: 1;
                width: auto;
            }

            // Links and text buttons take up minimal space
            .ds_link {
                min-width: fit-content;
            }
        }
        // Modifier to let buttons wrap
        &--wrap {
            flex-direction: row;
            flex-wrap: wrap;

            .ds_button {
                width: auto;
            }
        }
        // Centre align icon button label text when stacked
        &:not(.ds_button-group--inline):not(.ds_button-group--wrap){
            .ds_button--has-icon {
                padding-right: helpers.$button__height;
                padding-left: helpers.$button__height;
            }
        }
    }
}