// ============================================================================
// 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));
        }
    }
}

// .btn-group button {
//   background-color: #04AA6D; /* Green background */
//   border: 1px solid green; /* Green border */
//   color: white; /* White text */
//   padding: 10px 24px; /* Some padding */
//   cursor: pointer; /* Pointer/hand icon */
//   float: left; /* Float the buttons side by side */
// }

// .btn-group button:not(:last-child) {
//   border-right: none; /* Prevent double borders */
// }

// /* Clear floats (clearfix hack) */
// .btn-group:after {
//   content: "";
//   clear: both;
//   display: table;
// }

// /* Add a background color on hover */
// .btn-group button:hover {
//   background-color: #3e8e41;
// }

// // Vertical

// .btn-group button {
//   background-color: #04AA6D; /* Green background */
//   border: 1px solid green; /* Green border */
//   color: white; /* White text */
//   padding: 10px 24px; /* Some padding */
//   cursor: pointer; /* Pointer/hand icon */
//   width: 50%; /* Set a width if needed */
//   display: block; /* Make the buttons appear below each other */
// }

// .btn-group button:not(:last-child) {
//   border-bottom: none; /* Prevent double borders */
// }

// /* Add a background color on hover */
// .btn-group button:hover {
//   background-color: #3e8e41;
// }