@import (reference) '@sb1/ffe-core/less/breakpoints';

.ffe-button-group {
    display: flex;
    flex-direction: column;
    padding: var(--ffe-spacing-xl) 0;
    width: 100%;

    .ffe-button,
    .ffe-inline-button {
        justify-content: center;
        margin: 0 0 var(--ffe-spacing-xs);
    }

    &--thin {
        padding: 0;
    }

    &--inline {
        align-items: center;
        .ffe-button,
        .ffe-inline-button {
            display: inline;
            width: fit-content;
        }
    }

    @media (min-width: @breakpoint-sm) {
        display: inline-flex;
        flex-direction: row;
        width: auto;
        flex-wrap: wrap;
        gap: var(--ffe-spacing-xs) var(--ffe-spacing-sm);

        .ffe-button,
        .ffe-inline-button {
            width: auto;
        }
    }
}