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

.button_group {
    display: inline-flex;
    flex-wrap: nowrap;

    > 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
        &:not(:first-child) {
            margin-left: -q(1); // collapse borders
        }
    }
}

// .button_group--vertical {
//     flex-direction: column;

//     > button {
//         border-radius: 0;
//         &:first-child {
//             border-top-left-radius: var(--border_radius);
//             border-top-right-radius: var(--border_radius);
//         }
//         &:last-child {
//             border-bottom-left-radius: var(--border_radius);
//             border-bottom-right-radius: var(--border_radius);
//         }
//         &:not(:first-child) {
//             margin-top: -q(1);
//         }
//     }
// }

.button-group--vertical {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch; // ensures buttons fill the width

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

        &:not(:first-child) {
            margin-top: -q(1); // collapse borders
        }

        &: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));
        }
    }
}