.app-button-group {
    display: flex;
    gap: 12px;
    width: 100%;
    align-items: center;
}

/* Justify helpers when the group is not stretched */
.app-button-group.justify-start {
    justify-content: flex-start;
}

.app-button-group.justify-center {
    justify-content: center;
}

.app-button-group.justify-end {
    justify-content: flex-end;
}

/* For vertical direction the justify classes should control cross-axis alignment */
.app-button-group.direction-vertical.justify-start {
    align-items: flex-start;
}

.app-button-group.direction-vertical.justify-center {
    align-items: center;
}

.app-button-group.direction-vertical.justify-end {
    align-items: flex-end;
}

/* ========== DIRECTION VARIANTS ========== */
.app-button-group.direction-vertical {
    flex-direction: column;
    align-items: stretch;
}

/* ========== STRETCH ========== */
.app-button-group.stretch > .app-button {
    flex: 1 1 auto;
}

.app-button-group.direction-vertical.stretch > .app-button {
    width: 100%;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 640px) {
    .app-button-group.responsive {
        flex-direction: column;
        align-items: stretch;
    }

    .app-button-group.responsive > .app-button {
        width: 100%;
        flex-basis: auto;
    }
}

/* ========== BUTTON SIZING UTILITIES ========== */
.app-button.btn-1-2 {
    flex-basis: 50%;
}

.app-button.btn-1-3 {
    flex-basis: 33.3333%;
}

.app-button.btn-2-3 {
    flex-basis: 66.6666%;
}

@media (max-width: 640px) {
    .app-button.btn-1-3, 
    .app-button.btn-2-3 {
        flex-basis: 100%;
    }
}