/// @Foundation.settings
// Button Group
$btngroup-background: $primary-color !default;
$btngroup-color: #fff !default;
$btngroup-radius: $button-radius !default;
///

$child-selectors: '> a, > label, > button';

%button-group {
  margin: 0;
  margin-bottom: 1rem;
  list-style-type: none;
  display: inline-flex;
  border-radius: $btngroup-radius;
  overflow: hidden;
  font-size: $button-font-size;

  > li {
    flex: 0 0 auto;

    // Links become buttons
    #{$child-selectors} {
      @extend %button;
      border-radius: 0;
      font-size: inherit;
      display: block;
      margin: 0;
    }
    > input + label {
      margin-left: 0;
    }
    // Add borders between items
    &:not(:last-child) {
      #{$child-selectors} {
        border-right: 1px solid scale-color($btngroup-background, $lightness: -25%);
      }
    }
  }

  @if using(iconic) {
    .iconic {
      width: 1em;
      height: 1em;
      vertical-align: middle;
      margin-right: 0.25em;
      margin-top: -2px; // The icons are oddly misaligned
    }
  }
}

%button-group-segmented {
  border: 1px solid $primary-color;
  transition-property: background color;

  > li {
    // Hide the radio button
    > input[type="radio"] {
      position: absolute;
      left: -9999px;
    }
    // This is the button
    #{$child-selectors} {
      margin-right: 0;
      background: transparent;
    }
  }
}

@mixin button-group-size($size: medium, $expand: false) {
  $size: $button-font-size * map-get($button-sizes, $size);
  font-size: $size;

  @if $expand {
    @include button-group-expand;
  }
}
@mixin button-group-expand($stretch: true) {
  display: if($stretch, flex, inline-flex);

  > li {
    flex: if($stretch, 1, 0 0 auto);

    #{$child-selectors} {
      @if $stretch { @include button-expand; }
    }
  }
}
@mixin button-group-style(
  $segmented: false,
  $background: $primary-color,
  $color: auto
) {

  @if not($segmented) {
    > li {
      #{$child-selectors} {
        @include button-style($background, auto, $color);
        border-color: scale-color($background, $lightness: -15%);
      }
      &.is-active {
        #{$child-selectors} {
          background: scale-color($background, $lightness: -15%);
        }
      }
    }
  }
  @else {
    @extend %button-group-segmented;
    $hover-color: rgba($background, 0.25);
    border-color: $background;

    > li {
      // This is the button
      #{$child-selectors} {
        border-color: $background;
        color: $background;

        // This is the button being hovered on
        &:hover {
          background: $hover-color;
          color: $background;
        }

        @if using(iconic) {
          .iconic { @include color-icon($background); }
        }
      }

      // This is the button when it's active
      &.is-active > a,
      > input:checked + label {
        &, &:hover {
          background: $background;
          color: isitlight($background);
        }

        @if using(iconic) {
          .iconic { @include color-icon(isitlight($background)); }
        }
      }
    }
  }
}

@mixin button-group(
  $segmented: false,
  $expand: false,
  $background: $primary-color,
  $color: #fff
) {
  @extend %button-group;
  @include button-group-expand($expand);
  @include button-group-style($segmented, $background, $color);
  border-radius: $btngroup-radius;
}

@include exports(button-group) {
  .button-group {
    @include button-group;

    // Colors
    &.secondary { @include button-group-style(false, $secondary-color); }
    &.success   { @include button-group-style(false, $success-color); }
    &.warning   { @include button-group-style(false, $warning-color); }
    &.alert     { @include button-group-style(false, $alert-color); }

    // Individual colors
    > li {
      &.secondary { #{$child-selectors} { @include button-style($secondary-color, auto, $btngroup: true); } }
      &.success   { #{$child-selectors} { @include button-style($success-color, auto, $btngroup: true); } }
      &.warning   { #{$child-selectors} { @include button-style($warning-color, auto, $btngroup: true); } }
      &.alert     { #{$child-selectors} { @include button-style($alert-color, auto, $btngroup: true); } }
    }

    // Segmented
    &.segmented { @include button-group-style(true);
      &.secondary { @include button-group-style(true, $secondary-color); }
      &.success   { @include button-group-style(true, $success-color); }
      &.warning   { @include button-group-style(true, $warning-color); }
      &.alert     { @include button-group-style(true, $alert-color); }
    }

    // Sizing
    &.tiny      { @include button-group-size(tiny); }
    &.small     { @include button-group-size(small); }
    &.large     { @include button-group-size(large); }
    &.expand    { @include button-group-expand; }

    // Disabled
    li.disabled {
      #{$child-selectors} {
        @include button-disabled;
      }
    }
  }
}