/*
* @category containers
* @component button-group
*/

@import '../settings/buttons';
@import '../settings/button-group';
@import '../tools/mixins/border-radius';
@import '../tools/mixins/buttons';
@import '../tools/mixins/vendor-prefixes';

@include exports('cui-button-group') {
  .#{$button-group__class} {
    display: flex;
    width: 100%;

    > .#{$button__class} {
      @include button-color(
        $color: $button-group__color,
        $color-hover: $button-group__color,
        $color-active: $button-group-active__color,
        $color-disabled: $button-group-disabled__color,
        $bg: $button-group__background,
        $bg-active: $button-group-active__background,
        $bg-disabled: $button-group__background,
        $bg-hover: $button-group-hover__background
      );

      min-width: 0;
      padding: $button-group__padding;
      margin-left: 0;
      font-size: $button-group__font-size;
      line-height: $button-group__line-height;
      border: $button-group__border;
      border-radius: 0;

      &:first-child {
        @include border-left-radius($button-group__border-radius);
      }

      &:not(:first-child) {
        margin-left: -$button-group__border-size;
      }

      &:last-child {
        @include border-right-radius($button-group__border-radius);
      }

      &.#{$button__class}--icon-group {
        width: auto;
        padding: $button-group-icon__padding;

        .cui-icon {
          fill: currentColor;
        }
      }
    }

    &.#{$button-group__class} {
      &--justified {
        > .#{$button__class}:not(.#{$button__class}--icon-group) {
          flex-grow: 1;
          width: 0;
        }
      }

      &--pill {
        :first-child {
          @include border-left-radius($button-group__border-radius-pill);
        }

        :last-child {
          @include border-right-radius($button-group__border-radius-pill);
        }

        :first-child:last-child {
          border-radius: $button-group__border-radius-pill;
        }

        > .#{$button__class} {
          width: auto;
          padding: $button-group-icon__padding;

          @include button-color(
            $box-shadow: 0 2px 4px 0 $black-4,
            $border: 1px solid $black-12,
            $color: $button-group__color,
            $color-hover: $button-group__color,
            $color-disabled: $button-group-disabled__color,
            $bg: $button-group__background,
            $bg-disabled: $button-group__background,
            $bg-hover: $blue-pastel
          );

          .cui-icon {
            fill: currentColor;
          }
        }
      }

      &--dark {
        > .#{$button__class} {
          @include button-color(
            $color: $button-group__color--dark,
            $color-hover: $button-group__color--dark,
            $color-active: $button-group-active__color--dark,
            $color-disabled: $button-group-disabled__color--dark,
            $bg: $button-group__background,
            $bg-active: $button-group-active__background--dark,
            $bg-disabled: $button-group__background,
            $bg-hover: $button-group-hover__background--dark
          );

          padding: $button-group__padding--dark;
          font-size: $button-group__font-size--dark;
          line-height: $button-group__line-height--dark;
          border: $button-group__border--dark;

          &.active {
            font-family: $brand-font-bold;
          }
        }
      }
    }
  }
}


/**
* @section default
* @component button-group
*
* @html
  <div class="cui-button-group cui-button-group--justified" role="group">
    <button
      class="cui-button cui-button--36"
      alt="1"
      type="button"
      aria-label="1">
      <span class="cui-button__children">one</span>
    </button>
    <button
      class="cui-button cui-button--36"
      disabled=""
      alt="2"
      type="button"
      aria-label="2">
      <span class="cui-button__children">two</span>
    </button>
    <button
      class="cui-button cui-button--36"
      alt="3"
      type="button"
      aria-label="3">
      <span class="cui-button__children">three</span>
    </button>
  </div>
*/

/**
* @section justified-false
* @component button-group
*
* @html
  <div class="cui-button-group" role="group" aria-label="">
    <button class="cui-button cui-button--36" alt="1" type="button" aria-label="1">
      <span class="cui-button__children">one</span>
    </button>
    <button class="cui-button cui-button--36" disabled="" alt="2" type="button" aria-label="2">
      <span class="cui-button__children">two</span>
    </button>
    <button class="cui-button cui-button--36" alt="3" type="button" aria-label="3">
      <span class="cui-button__children">three</span>
    </button>
  </div>
*/

/**
* @section pill
* @component button-group
*
* @html
  <div class="cui-button-group cui-button-group--justified cui-button-group--pill" role="group">
    <button
      class="cui-button cui-button--36 cui-button--icon-group"
      alt="Left" type="button" aria-label="Left" style="width: 60px;">
      <span class="cui-button__children">
        <i class="icon icon-flag_16"></i>
      </span>
    </button>
    <button
      class="cui-button cui-button--36 cui-button--icon-group"
      alt="Right" type="button" aria-label="Right" style="width: 60px;">
      <span class="cui-button__children">
        <i class="icon icon-cancel_16"></i>
      </span>
    </button>
  </div>
*/

/**
* @section highlight-false
* @component button-group
*
* @html
  <div class="cui-button-group" role="group" aria-label="">
    <button
      class="cui-button cui-button--36 cui-button--icon-group"
      alt="Left" type="button" aria-label="Left">
      <span class="cui-button__children">
        <i class="icon icon-arrow-left_12"></i>
      </span>
    </button>
    <button
      class="cui-button cui-button--36"
      alt="Today" type="button" aria-label="Today">
      <span class="cui-button__children">Today</span>
    </button>
    <button
      class="cui-button cui-button--36 cui-button--icon-group"
      alt="Right" type="button" aria-label="Right">
      <span class="cui-button__children">
        <i class="icon icon-arrow-right_12"></i>
      </span>
    </button>
  </div>
*/

/**
* @section dark
* @component button-group
*
* @html
  <div class="cui-button-group cui-button-group--dark cui-button-group--justified" role="group">
    <button
      class="cui-button cui-button--36"
      alt="Spaces"
      type="button"
      aria-label="Spaces">
      <span class="cui-button__children">Spaces</span>
    </button>
    <button
      class="cui-button cui-button--36"
      alt="Messages"
      type="button"
      aria-label="Messages">
      <span class="cui-button__children">Messages</span>
    </button>
  </div>
*/