/*
Group buttons

This represents a group of buttons.

Markup:
<ul class="button-group row">
    <li>
        <button class="btn">Receive payment</button>
    </li>
    <li>
        <button class="btn">Update recurring charges</button>
    </li>
    <li>
        <button class="btn">Add meter reading</button>
    </li>
    <li class="last-child">
        <button class="btn">Enter bulk charges</button>
    </li>
</ul>

Name: buttonGroup

Styleguide 2.11
*/


//---------------------------------------------------
// Button groups via Bootstrap
// --------------------------------------------------

// Make the div behave like a button
.btn-group,
.btn-group-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle; // match .btn alignment given font-size hack above
    > .btn {
        position: relative;
        float: left;
        // Bring the "active" button to the front
        &:hover,
        &:focus,
        &:active,
        &.active {
            z-index: @z-index-button-group-active;
        }
    }
}

// Prevent double borders when buttons are next to each other
.btn-group {
    .btn + .btn,
    .btn + .btn-group,
    .btn-group + .btn,
    .btn-group + .btn-group {
        margin-left: -1px;
    }
}

// Optional: Group multiple button groups together for a toolbar
.btn-toolbar {
    margin-left: -5px; // Offset the first child's margin

    .btn,
    .btn-group,
    .input-group {
        float: left;
    }

    > .btn,
    > .btn-group,
    > .input-group {
        margin-left: 5px;
    }
}

.btn-toolbar--with-popover {
    .popover__link .btn {
        float: none;
    }
}

.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
    border-radius: 0;
}

// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
.btn-group > .btn:first-child {
    margin-left: 0;

    &:not(:last-child):not(.dropdown-toggle) {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
    }
}
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
.btn-group > .btn-group {
    float: left;
}

.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
    border-radius: 0;
}

.btn-group > .btn-group:first-child:not(:last-child) {
    > .btn:last-child,
    > .dropdown-toggle {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
    }
}

.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

// On active and open, don't show outline
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
    outline: 0;
}

/************************************************
Button Group
************************************************/
.button-group {
    display: inline;
    list-style-type: none;
}

.button-group li {
    float: left;
}

.button-group li .btn {
    margin: 0;
    border-right: 1px solid transparent;
    border-radius: 0;
    text-decoration: none;

    &:hover {
        border: 1px solid @color-buildium-green;
        color: @color-buildium-green;
        text-decoration: none;
    }

    &:active,
    &:focus {
        outline: none;
        color: @color-button-primary-border;
        border: 1px solid @color-button-primary-border;
    }

    &.btn--nps-selected {
        color: #FFFFFF;
        background-color: @color-buildium-green;
        border: 1px solid @color-button-primary-border;

        &:hover,
        &:focus {
            color: #FFFFFF;
        }
    }
}

.button-group li:first-child .btn {
    border-top-left-radius: @border-radius-default;
    border-bottom-left-radius: @border-radius-default;
}

.button-group li:last-child .btn {
    border-right: 1px solid @theme-grey10;
    border-top-right-radius: @border-radius-default;
    border-bottom-right-radius: @border-radius-default;

    &:hover,
    &:focus {
        border-right: 1px solid @color-buildium-green;
    }
}

.button-group li .btn--disabled,
.button-group li .btn[disabled],
.button-group li:last-child .btn--disabled,
.button-group li:last-child .btn[disabled] {
    .btn--disabled;

    &:hover {
        border-right: 1px solid @theme-grey10;
    }
}

.button-group .sub-menu li {
    float: none
}

/************************************************
Button Grouping / Positioning
************************************************/
.button-container > .btn, .button-container > select, .button-container > .action-note, .button-container > ul {
    float: left;
    margin-right: 10px;
}

.button-container.right > .btn, .button-container.right > select, .button-container.right > .action-note, .button-container.right > ul {
    margin-right: 0;
    margin-left: 10px;
}

.button-container.right {
    float: right;
}

.button-container > li {
    float: left;
    margin-left: 20px;
}

.button-container > li:first-child {
    margin-left: 0;
}

.button-container .button.right {
    float: right;
    margin-right: 0;
}

.button-container .button-group.right {
    float: right;
    margin-right: 0;
}

.button-container > .action-note {
    padding-top: 6px;
}

.group.right {
    float: right;
    margin-top: 5px;
}