// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

////
/// @group button-group
////

/// Margin for button groups.
/// @type Number
$buttongroup-margin: 1rem !default;

/// Margin between buttons in a button group.
/// @type Border
$buttongroup-spacing: 1px !default;

/// Selector for the buttons inside a button group.
/// @type String
$buttongroup-child-selector: '.button' !default;

/// Maximum number of buttons that can be in an even-width button group.
/// @type Number
$buttongroup-expand-max: 6 !default;

/// Add styles for a button group container.
/// @param {String} $child-selector [$buttongroup-child-selector] - Selector for the buttons inside a button group.
@mixin button-group(
  $child-selector: $buttongroup-child-selector
) {
  @include clearfix;
  margin-bottom: $buttongroup-margin;
  font-size: map-get($button-sizes, default);

  #{$child-selector} {
    float: #{$global-left};
    margin: 0;
    font-size: inherit;

    &:not(:last-child) {
      border-#{$global-right}: $buttongroup-spacing solid $body-background;
    }
  }
}

/// Creates a full-width button group, making each button equal width.
/// @param {Keyword|Number} $count [auto] - Number of buttons inside the button group. Set to `auto` to generate CSS that will account for a variable number of buttons.
/// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside a button group.
@mixin button-group-expand(
  $selector: $buttongroup-child-selector
) {
  display: table;
  table-layout: fixed;
  width: 100%;

  &::before,
  &::after {
    display: none;
  }

  #{$selector} {
    display: table-cell;
    float: none;
  }
}

/// Stacks the buttons in a button group.
/// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside the button group.
@mixin button-group-stack(
  $selector: $buttongroup-child-selector
) {
  #{$selector} {
    width: 100%;

    &:not(:last-child) {
      border-#{$global-right}: $buttongroup-spacing solid;
    }
  }
}

/// Un-stacks the buttons in a button group.
/// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside the button group.
@mixin button-group-unstack(
  $selector: $buttongroup-child-selector
) {
  #{$selector} {
    width: auto;

    &:not(:last-child) {
      border-#{$global-right}: $buttongroup-spacing solid $body-background;
    }
  }
}

@mixin foundation-button-group {
  .button-group {
    @include button-group;

    // Sizes
    &.tiny     { font-size: map-get($button-sizes, tiny); }
    &.small    { font-size: map-get($button-sizes, small); }
    &.large    { font-size: map-get($button-sizes, large); }
    &.expanded { @include button-group-expand; }

    // Colors
    @each $name, $color in $foundation-colors {
      @if $button-fill != hollow {
        &.#{$name} #{$buttongroup-child-selector} {
          @include button-style($color, auto, auto);
        }
      }
      @else {
        &.#{$name} #{$buttongroup-child-selector} {
          @include button-hollow;
          @include button-hollow-style($color);
        }
      }
    }

    &.stacked,
    &.stacked-for-small {
      @include button-group-stack;
    }

    &.stacked-for-small {
      @include breakpoint(medium) {
        @include button-group-unstack;
      }
    }
  }
}