/* ============================================================================
   06-COMPONENTS -> #BUTTON-GROUP
   ========================================================================= */

/**
 * A wrapper for multiple related buttons.
 */


//
// SCSS imports
//

@use '../01-settings' as *;
@use '../02-tools' as *;
 

/**
 * Button group
 *
 * 1. Set the 'z-index' value to '1' so the focus state is clearly visible
 *    above other buttons in the group.
 */

.button-group {
    display: inline-flex;
    position: relative;
    vertical-align: middle;

    & > .button {
        &:not(:first-child) {
            margin-left: calc(var(--border-width) * -1);
        }

        &:not(.button:first-child) {
            border-bottom-left-radius: 0;
            border-top-left-radius: 0;
        }

        &:not(.button:last-child) {
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
        }

        &:focus {
            z-index: var(--z-index-10); // [1]
        }
    }
}