/*
* @category controls
* @component button
* @design collaboration-design
*/

@import '../tools/functions/core';
@import '../settings/buttons';
@import '../settings/fonts';
@import '../settings/icon';
@import '../settings/typography';
@import '../tools/mixins/buttons';
@import '../tools/mixins/flex';

@include exports('cui-button') {
  [class|='#{$button__class}__container'] {
    @include flex($display: inline-flex, $fd: column);

    width: $button-container__width;

    &[class$='--small'] {
      width: $button-container--small__width;
    }
  }

  // Default styles applied outside of media query
  %#{$button__class},
  .#{$button__class} {
    @include button-base;
    @include button-size(
      $padding: $button__padding--36,
      $radius: $button__radius--36
    );
    @include button-color($focus: true);
    @include single-transition(
      background-color,
      $button__transition-speed,
      ease
    );

    .#{$dark-class} & {
      @include button-color(
        $color: $button__font-color--alt,
        $bg: $button__background-color--dark,
        $bg-hover: $button__background-color--hover--dark,
        $bg-active: $button__background-color--active--dark,
        $focus: true,
        $border-focus: $focus__color--dark,
        $color-disabled: $button__font-color--disabled--dark,
        $bg-disabled: $button__color--disabled--dark
      );
    }

    .#{$contrast-class} & {
      @include button-color(
        $color: $button__font-color--alt,
        $bg: $button__background-color--contrast,
        $bg-hover: $button__background-color--hover--contrast,
        $bg-active: $button__background-color--active--contrast
      );
    }

    .#{$contrast-class}.#{$dark-class} & ,
    .#{$contrast-class} .#{$dark-class} & {
      @include button-color(
        $color: $button__font-color,
        $bg: $button__background-color--dark--contrast,
        $bg-hover: $button__background-color--hover--dark--contrast,
        $bg-active: $button__background-color--active--dark--contrast
      );
    }

    + .#{$button__class}__label {
      display: block;
      width: 100%;
      overflow: hidden;
      text-align: center;
    }

    &%#{$button__class},
    &.#{$button__class} {
      &--expand {
        @include button-size($full-width: true);

        display: block;
      }

      &--left {
        text-align: left;
        text-indent: rem-calc(12);
      }

      &--right {
        padding-right: rem-calc(12);
        text-align: right;
      }

      &--none {
        @include button-color(
          $color: inherit,
          $bg: transparent,
          $bg-hover: transparent,
          $bg-active: transparent,
          $color-disabled: $button__link-color--disabled
        );
        @include button-size($radius: 0, $padding: 0);

        min-width: 0;
      }

      &--size-none {
        @include button-size($radius: 0, $padding: 0);

        min-width: 0;
      }

      &--28 {
        @include button-size(
          $padding: $button__padding--28,
          $radius: $button__radius--28,
          $font-size: $button__font-size--28,
          $line-height: $button__line-height--28
        );
      }

      &--36 {
        @include button-size(
          $padding: $button__padding--36,
          $radius: $button__radius--36
        );
      }

      &--40 {
        @include button-size(
          $padding: $button__padding--40,
          $radius: $button__radius--40
        );
      }

      &--large,
      &--52 {
        @include button-size(
          $padding: $button__padding--52,
          $radius: $button__radius--52
        );
      }

      &--circle {
        @include radius($button__radius--round);

        padding: 0;

        @include button-circle-size(
          $size: $button__size--36,
          $font-size: $button__font-size--36
        );

        &[class*='--none'] {
          @include button-color(
            $color: inherit,
            $bg: transparent,
            $bg-hover: transparent,
            $bg-active: transparent,
            $color-disabled: $button__link-color--disabled
          );
          @include button-circle-size($size: auto);
        }

        &[class*='--size-none'] {
          @include button-circle-size($size: auto);
        }

        &[class*='--20'] {
          @include button-circle-size(
            $size: $button__size--20,
            $font-size: $button__font-size--20
          );
        }

        &[class*='--28'] {
          @include button-circle-size(
            $size: $button__size--28,
            $font-size: $button__font-size--28
          );
        }

        &[class*='--32'] {
          @include button-circle-size(
            $size: $button__size--32,
            $font-size: $button__font-size--32
          );
        }

        &[class*='--36'] {
          @include button-circle-size(
            $size: $button__size--36,
            $font-size: $button__font-size--36
          );
        }

        &[class*='--40'] {
          @include button-circle-size(
            $size: $button__size--40,
            $font-size: $button__font-size--40
          );
        }

        &[class*='--large'],
        &[class*='--44'] {
          @include button-circle-size(
            $size: $button__size--44,
            $font-size: $button__font-size--44
          );
        }

        &[class*='--56'] {
          @include button-circle-size(
            $size: $button__size--56,
            $font-size: $button__font-size--56
          );
        }

        &[class*='--68'] {
          @include button-circle-size(
            $size: $button__size--68,
            $font-size: $button__font-size--68
          );
        }

        &[class*='--72'] {
          @include button-circle-size(
            $size: $button__size--72,
            $font-size: $button__font-size--72
          );
        }

        &[class*='--84'] {
          @include button-circle-size(
            $size: $button__size--84,
            $font-size: $button__font-size--84
          );
        }

        &.icon {
          font-family: $icon-font-name;
        }
      }

      .cui-loading {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }

      &--blue {
        @include button-color(
          $color: $button__font-color--alt,
          $bg: $button--blue__background-color,
          $bg-hover: $button--blue__background-color--hover,
          $bg-active: $button--blue__background-color--active
        );

        .#{$dark-class} & {
          @include button-color-disabled(
            $button__font-color--disabled--dark,
            $button__color--disabled--dark
          );
        }

        .#{$contrast-class} & {
          @include button-color(
          $color: $button__font-color--alt,
          $bg: $button--blue__background-color--contrast,
          $bg-hover: $button--blue__background-color--hover--contrast,
          $bg-active: $button--blue__background-color--active--contrast
          );
        }
      }

      &--red {
        @include button-color(
          $color: $button__font-color--alt,
          $bg: $button--red__background-color,
          $bg-hover: $button--red__background-color--hover,
          $bg-active: $button--red__background-color--active
        );

        .#{$dark-class} & {
          @include button-color-disabled(
            $button__font-color--disabled--dark,
            $button__color--disabled--dark
          );
        }

        .#{$contrast-class} & {
          @include button-color(
          $color: $button__font-color--alt,
          $bg: $button--red__background-color--contrast,
          $bg-hover: $button--red__background-color--hover--contrast,
          $bg-active: $button--red__background-color--active--contrast
          );
        }
      }

      &--green {
        @include button-color(
          $color: $button__font-color--alt,
          $bg: $button--green__background-color,
          $bg-hover: $button--green__background-color--hover,
          $bg-active: $button--green__background-color--active
        );

        .#{$dark-class} & {
          @include button-color-disabled(
            $button__font-color--disabled--dark,
            $button__color--disabled--dark
          );
        }

        .#{$contrast-class} & {
          @include button-color(
          $color: $button__font-color--alt,
          $bg: $button--green__background-color--contrast,
          $bg-hover: $button--green__background-color--hover--contrast,
          $bg-active: $button--green__background-color--active--contrast
          );
        }
      }

      &--orange {
        @include button-color(
          $color: $button__font-color--alt,
          $bg: $button--orange__background-color,
          $bg-hover: $button--orange__background-color--hover,
          $bg-active: $button--orange__background-color--active
        );

        .#{$dark-class} & {
          @include button-color-disabled(
            $button__font-color--disabled--dark,
            $button__color--disabled--dark
          );
        }

        .#{$contrast-class} & {
          @include button-color(
          $color: $button__font-color--alt,
          $bg: $button--orange__background-color--contrast,
          $bg-hover: $button--orange__background-color--hover--contrast,
          $bg-active: $button--orange__background-color--active--contrast
          );
        }
      }

      &--yellow {
        @include button-color(
          $color: $button__font-color--alt,
          $bg: $button--yellow__background-color,
          $bg-hover: $button--yellow__background-color--hover,
          $bg-active: $button--yellow__background-color--active
        );

        .#{$dark-class} & {
          @include button-color-disabled(
            $button__font-color--disabled--dark,
            $button__color--disabled--dark
          );
        }

        .#{$contrast-class} & {
          @include button-color(
          $color: $button__font-color--alt,
          $bg: $button--yellow__background-color--contrast,
          $bg-hover: $button--yellow__background-color--hover--contrast,
          $bg-active: $button--yellow__background-color--active--contrast
          );
        }
      }

      &--mint {
        @include button-color(
          $color: $button__font-color--alt,
          $bg: $button--mint__background-color,
          $bg-hover: $button--mint__background-color--hover,
          $bg-active: $button--mint__background-color--active
        );

        .#{$dark-class} & {
          @include button-color-disabled(
            $button__font-color--disabled--dark,
            $button__color--disabled--dark
          );
        }

        .#{$contrast-class} & {
          @include button-color(
          $color: $button__font-color--alt,
          $bg: $button--mint__background-color--contrast,
          $bg-hover: $button--mint__background-color--hover--contrast,
          $bg-active: $button--mint__background-color--active--contrast
          );
        }
      }

      &--purple {
        @include button-color(
          $color: $button__font-color--alt,
          $bg: $button--purple__background-color,
          $bg-hover: $button--purple__background-color--hover,
          $bg-active: $button--purple__background-color--active
        );

        .#{$dark-class} & {
          @include button-color-disabled(
            $button__font-color--disabled--dark,
            $button__color--disabled--dark
          );
        }

        .#{$contrast-class} & {
          @include button-color(
          $color: $button__font-color--alt,
          $bg: $button--purple__background-color--contrast,
          $bg-hover: $button--purple__background-color--hover--contrast,
          $bg-active: $button--purple__background-color--active--contrast
          );
        }
      }

      &--pink {
        @include button-color(
          $color: $button__font-color--alt,
          $bg: $button--pink__background-color,
          $bg-hover: $button--pink__background-color--hover,
          $bg-active: $button--pink__background-color--active
        );

        .#{$dark-class} & {
          @include button-color-disabled(
            $button__font-color--disabled--dark,
            $button__color--disabled--dark
          );
        }

        .#{$contrast-class} & {
          @include button-color(
          $color: $button__font-color--alt,
          $bg: $button--pink__background-color--contrast,
          $bg-hover: $button--pink__background-color--hover--contrast,
          $bg-active: $button--pink__background-color--active--contrast
          );
        }
      }

      &--cyan {
        @include button-color(
          $color: $button__font-color--alt,
          $bg: $button--cyan__background-color,
          $bg-hover: $button--cyan__background-color--hover,
          $bg-active: $button--cyan__background-color--active
        );

        .#{$dark-class} & {
          @include button-color-disabled(
            $button__font-color--disabled--dark,
            $button__color--disabled--dark
          );
        }

        .#{$contrast-class} & {
          @include button-color(
          $color: $button__font-color--alt,
          $bg: $button--cyan__background-color--contrast,
          $bg-hover: $button--cyan__background-color--hover--contrast,
          $bg-active: $button--cyan__background-color--active--contrast
          );
        }
      }

      &--white {
        @include button-color(
          $color: $black,
          $bg: $button--white__background-color,
          $bg-hover: $button--white__background-color--hover,
          $bg-active: $button--white__background-color--active,
          $box-shadow: $button--white__border,
          $focus: true
        );

        .#{$dark-class} & {
          box-shadow: none;

          @include button-color-disabled(
            $button__font-color--disabled--dark,
            $button__color--disabled--dark
          );
          @include button-color-focus;
        }
      }

      &--link {
        @include button-color(
          $color: $button__font-color--alt,
          $bg: transparent,
          $bg-hover: $button__background-color--hover,
          $bg-active: $button__background-color--active
        );

        color: $anchor-font-color;
      }

      &--color-none {
        @include button-color(
          $color: inherit,
          $bg: transparent,
          $bg-hover: transparent,
          $bg-active: transparent,
          $color-disabled: $button__link-color--disabled
        );
      }
    }

    &.#{$button__class}--icon {
      @include button-color(
        $color: inherit,
        $bg: transparent,
        $bg-hover: transparent,
        $bg-active: transparent,
        $color-disabled: $button__link-color--disabled
      );
      @include button-color-fill(
        $fill: $black-60,
        $fill-hover: $blue-hover,
        $fill-active: $blue-press,
        $fill-disabled: $button__link-color--disabled
      );
      @include button-size($radius: 0, $padding: 0);

      min-width: 0;

      &.#{$button__class}--icon-white {
        @include button-color-fill(
          $fill: $icon--white__fill,
          $fill-hover: $icon--white__fill--hover,
          $fill-active: $icon--white__fill--active,
          $fill-disabled: $icon--white__fill--disabled
        );
        .#{$contrast-class} & {
          @include button-color-fill(
            $fill: $icon--white__fill--contrast,
            $fill-hover: $icon--white__fill--hover--contrast,
            $fill-active: $icon--white__fill--active--contrast,
            $fill-disabled: $icon--white__fill--disabled--contrast
          );
        }
      }
    }
  }

  // Remove default button element styling
  .#{$button__class}--none,
  %#{$button__class}--none {
    @include button-color(
      $color: inherit,
      $bg: transparent,
      $bg-hover: transparent,
      $bg-active: transparent,
      $color-disabled: $button__link-color--disabled
    );
    @include button-size($radius: 0, $padding: 0);

    min-width: 0;
  }
}

/**
* @name Buttons
* @description Buttons are convenient tools when you need more traditional clicking actions.
*
* @category controls
* @component button
*
* @state :hover - Highlights when hovering
* @state :active - Indicates that the button is active
* @state :focus - Focus state of the button
* @state :disabled - Dims the button when disabled
* @state .cui-button--blue - Indicates the button is in primary state
* @state .cui-button--orange - Indicates the button is in meetings state
* @state .cui-button--mint - Indicates the button is in people state
* @state .cui-button--red - Indicates the button is in negative state
* @state .cui-button--green - Indicates the button is in call to action state
* @state .cui-button--yellow - Indicates the button is in attention state
* @state .cui-button--link - Indicates the button is in link state
* @state .cui-button--lg - Indicates the button is large
* @state .cui-button--expand - Indicates the button is expanded
* @state .cui-button--small - Indicates the button is small
* @state .cui-button--circle - Indicates the button is circular
* @state .cui-loading - Indicates the button is loading
*
*/

/**
* @name Button Tags
* @description Use the button classes on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.
*
* @category controls
* @component button
* @section tags
*
*
* @html
*
*<form>
*  <a class="cui-button" href="javascript:void(0)" role="button">Link</a>
*  <button class="cui-button" type="submit" onclick="return false;">Button</button>
*  <input class="cui-button" type="button" value="Input" onclick="return false;">
*  <input class="cui-button" type="submit" value="Submit" onclick="return false;">
*</form>
*/

/**
* @name Button States
* @description Use any of the available button classes to quickly create a styled button.
*
*
* @category controls
* @component button
* @section states
* @hidecode true
*
* @html
*
<div class="docs-example docs-example--spacing">
  <h3>Default <code class="small">.cui-button</code></h3>
  <button type="button" class="cui-button">Button</button>
  <button type="button" class="cui-button hover-state">Hover</button>
  <button type="button" class="cui-button active-state hover-state">Pressed/Active</button>
  <button type="button" class="cui-button focus-state">Focus</button>
  <button type="button" class="cui-button disabled">Disabled</button>
</div>
<div class="docs-example docs-example--spacing">
  <h3>Blue <code class="small">.cui-button--blue</code></h3>
  <button type="button" class="cui-button cui-button--blue">Button</button>
  <button type="button" class="cui-button cui-button--blue hover-state">Hover</button>
  <button type="button" class="cui-button cui-button--blue active-state hover-state">Pressed/Active</button>
  <button type="button" class="cui-button cui-button--blue focus-state">Focus</button>
  <button type="button" class="cui-button cui-button--blue disabled">Disabled</button>
</div>
<div class="docs-example docs-example--spacing">
  <h3>Green <code class="small">.cui-button--green</code></h3>
  <button type="button" class="cui-button cui-button--green">Button</button>
  <button type="button" class="cui-button cui-button--green hover-state">Hover</button>
  <button type="button" class="cui-button cui-button--green active-state hover-state">Pressed/Active</button>
  <button type="button" class="cui-button cui-button--green focus-state">Focus</button>
  <button type="button" class="cui-button cui-button--green disabled">Disabled</button>
</div>
<div class="docs-example docs-example--spacing">
  <h3>Red <code class="small">.cui-button--red</code></h3>
  <button type="button" class="cui-button cui-button--red">Button</button>
  <button type="button" class="cui-button cui-button--red hover-state">Hover</button>
  <button type="button" class="cui-button cui-button--red active-state hover-state">Pressed/Active</button>
  <button type="button" class="cui-button cui-button--red focus-state">Focus</button>
  <button type="button" class="cui-button cui-button--red disabled">Disabled</button>
</div>
<div class="docs-example docs-example--spacing">
  <h3>Orange <code class="small">.cui-button--orange</code></h3>
  <button type="button" class="cui-button cui-button--orange">Button</button>
  <button type="button" class="cui-button cui-button--orange hover-state">Hover</button>
  <button type="button" class="cui-button cui-button--orange active-state hover-state">Pressed/Active</button>
  <button type="button" class="cui-button cui-button--orange focus-state">Focus</button>
  <button type="button" class="cui-button cui-button--orange disabled">Disabled</button>
</div>
<div class="docs-example docs-example--spacing">
  <h3>Yellow <code class="small">.cui-button--yellow</code></h3>
  <button type="button" class="cui-button cui-button--yellow">Button</button>
  <button type="button" class="cui-button cui-button--yellow hover-state">Hover</button>
  <button type="button" class="cui-button cui-button--yellow active-state hover-state">Pressed/Active</button>
  <button type="button" class="cui-button cui-button--yellow focus-state">Focus</button>
  <button type="button" class="cui-button cui-button--yellow disabled">Disabled</button>
</div>
<div class="docs-example docs-example--spacing">
  <h3>Mint <code class="small">.cui-button--mint</code></h3>
  <button type="button" class="cui-button cui-button--mint">Button</button>
  <button type="button" class="cui-button cui-button--mint hover-state">Hover</button>
  <button type="button" class="cui-button cui-button--mint active-state hover-state">Pressed/Active</button>
  <button type="button" class="cui-button cui-button--mint focus-state">Focus</button>
  <button type="button" class="cui-button cui-button--mint disabled">Disabled</button>
</div>
<div class="docs-example docs-example--spacing">
  <h3>Purple <code class="small">.cui-button--purple</code></h3>
  <button type="button" class="cui-button cui-button--purple">Button</button>
  <button type="button" class="cui-button cui-button--purple hover-state">Hover</button>
  <button type="button" class="cui-button cui-button--purple active-state hover-state">Pressed/Active</button>
  <button type="button" class="cui-button cui-button--purple focus-state">Focus</button>
  <button type="button" class="cui-button cui-button--purple disabled">Disabled</button>
</div>
<div class="docs-example docs-example--spacing">
  <h3>Pink <code class="small">.cui-button--pink</code></h3>
  <button type="button" class="cui-button cui-button--pink">Button</button>
  <button type="button" class="cui-button cui-button--pink hover-state">Hover</button>
  <button type="button" class="cui-button cui-button--pink active-state hover-state">Pressed/Active</button>
  <button type="button" class="cui-button cui-button--pink focus-state">Focus</button>
  <button type="button" class="cui-button cui-button--pink disabled">Disabled</button>
</div>
<div class="docs-example docs-example--spacing">
  <h3>White <code class="small">.cui-button--white</code></h3>
  <button type="button" class="cui-button cui-button--white">Button</button>
  <button type="button" class="cui-button cui-button--white hover-state">Hover</button>
  <button type="button" class="cui-button cui-button--white active-state hover-state">Pressed/Active</button>
  <button type="button" class="cui-button cui-button--white focus-state">Focus</button>
  <button type="button" class="cui-button cui-button--white disabled active">Disabled</button>
</div>
<div class="docs-example docs-example--spacing cui--contrast">
  <h3>Contrast <code class="small">.cui-button .cui--contrast</code></h3>
  <button type="button" class="cui-button">Contrast</button>
  <button type="button" class="cui-button cui-button--blue">Contrast</button>
  <button type="button" class="cui-button cui-button--green">Contrast</button>
  <button type="button" class="cui-button cui-button--red">Contrast</button>
  <button type="button" class="cui-button cui-button--orange">Contrast</button>
  <button type="button" class="cui-button cui-button--yellow">Contrast</button>
  <button type="button" class="cui-button cui-button--mint">Contrast</button>
  <button type="button" class="cui-button cui-button--purple">Contrast</button>
  <button type="button" class="cui-button cui-button--pink">Contrast</button>
  <span class="cui--dark">
    <button type="button" class="cui-button">Contrast</button>
  </span>
</div>
*/

/**
* @name Dark Theme Button States
* @description Use any of the available button classes to quickly create a styled button.
*
*
* @category controls
* @component button
* @section dark-states
* @hidecode true
*
* @html
*
<div class="docs-example docs-example--dark cui--dark">
  <div class="docs-example--spacing">
    <h3 style="color:white;">Default <code class="small">.cui-button</code></h3>
    <button type="button" class="cui-button">Button</button>
    <button type="button" class="cui-button hover-state">Hover</button>
    <button type="button" class="cui-button active-state hover-state">Pressed/Active</button>
    <button type="button" class="cui-button focus-state">Focus</button>
    <button type="button" class="cui-button disabled">Disabled</button>
  </div>
  <div class="docs-example--spacing">
    <h3 style="color:white;">Blue <code class="small">.cui-button--blue</code></h3>
    <button type="button" class="cui-button cui-button--blue">Button</button>
    <button type="button" class="cui-button cui-button--blue hover-state">Hover</button>
    <button type="button" class="cui-button cui-button--blue active-state hover-state">Pressed/Active</button>
    <button type="button" class="cui-button cui-button--blue focus-state">Focus</button>
    <button type="button" class="cui-button cui-button--blue disabled">Disabled</button>
  </div>
  <div class="docs-example--spacing">
    <h3 style="color:white;">Green <code class="small">.cui-button--green</code></h3>
    <button type="button" class="cui-button cui-button--green">Button</button>
    <button type="button" class="cui-button cui-button--green hover-state">Hover</button>
    <button type="button" class="cui-button cui-button--green active-state hover-state">Pressed/Active</button>
    <button type="button" class="cui-button cui-button--green focus-state">Focus</button>
    <button type="button" class="cui-button cui-button--green disabled">Disabled</button>
  </div>
  <div class="docs-example--spacing">
    <h3 style="color:white;">Red <code class="small">.cui-button--red</code></h3>
    <button type="button" class="cui-button cui-button--red">Button</button>
    <button type="button" class="cui-button cui-button--red hover-state">Hover</button>
    <button type="button" class="cui-button cui-button--red active-state hover-state">Pressed/Active</button>
    <button type="button" class="cui-button cui-button--red focus-state">Focus</button>
    <button type="button" class="cui-button cui-button--red disabled">Disabled</button>
  </div>
  <div class="docs-example--spacing">
    <h3 style="color:white;">Orange <code class="small">.cui-button--orange</code></h3>
    <button type="button" class="cui-button cui-button--orange">Button</button>
    <button type="button" class="cui-button cui-button--orange hover-state">Hover</button>
    <button type="button" class="cui-button cui-button--orange active-state hover-state">Pressed/Active</button>
    <button type="button" class="cui-button cui-button--orange focus-state">Focus</button>
    <button type="button" class="cui-button cui-button--orange disabled">Disabled</button>
  </div>
  <div class="docs-example--spacing">
    <h3 style="color:white;">Yellow <code class="small">.cui-button--yellow</code></h3>
    <button type="button" class="cui-button cui-button--yellow">Button</button>
    <button type="button" class="cui-button cui-button--yellow hover-state">Hover</button>
    <button type="button" class="cui-button cui-button--yellow active-state hover-state">Pressed/Active</button>
    <button type="button" class="cui-button cui-button--yellow focus-state">Focus</button>
    <button type="button" class="cui-button cui-button--yellow disabled">Disabled</button>
  </div>
  <div class="docs-example--spacing">
    <h3 style="color:white;">Mint <code class="small">.cui-button--mint</code></h3>
    <button type="button" class="cui-button cui-button--mint">Button</button>
    <button type="button" class="cui-button cui-button--mint hover-state">Hover</button>
    <button type="button" class="cui-button cui-button--mint active-state hover-state">Pressed/Active</button>
    <button type="button" class="cui-button cui-button--mint focus-state">Focus</button>
    <button type="button" class="cui-button cui-button--mint disabled">Disabled</button>
  </div>
  <div class="docs-example--spacing">
    <h3 style="color:white;">Purple <code class="small">.cui-button--purple</code></h3>
    <button type="button" class="cui-button cui-button--purple">Button</button>
    <button type="button" class="cui-button cui-button--purple hover-state">Hover</button>
    <button type="button" class="cui-button cui-button--purple active-state hover-state">Pressed/Active</button>
    <button type="button" class="cui-button cui-button--purple focus-state">Focus</button>
    <button type="button" class="cui-button cui-button--purple disabled">Disabled</button>
  </div>
  <div class="docs-example--spacing">
    <h3 style="color:white;">Pink <code class="small">.cui-button--pink</code></h3>
    <button type="button" class="cui-button cui-button--pink">Button</button>
    <button type="button" class="cui-button cui-button--pink hover-state">Hover</button>
    <button type="button" class="cui-button cui-button--pink active-state hover-state">Pressed/Active</button>
    <button type="button" class="cui-button cui-button--pink focus-state">Focus</button>
    <button type="button" class="cui-button cui-button--pink disabled">Disabled</button>
  </div>
  <div class="docs-example docs-example--spacing">
    <h3>White <code class="small">.cui-button--white</code></h3>
    <button type="button" class="cui-button cui-button--white">Button</button>
    <button type="button" class="cui-button cui-button--white hover-state">Hover</button>
    <button type="button" class="cui-button cui-button--white active-state hover-state">Pressed/Active</button>
    <button type="button" class="cui-button cui-button--white focus-state">Focus</button>
    <button type="button" class="cui-button cui-button--white disabled active">Disabled</button>
  </div>
</div>
*/

/**
* @name Default Buttons
* @description Create buttons by adding the <code>.cui-button</code> class to the button element.
*
* @category controls
* @component button
* @section default
*
*
* @html
*
* <div class="docs-example docs-example--spacing">
*   <button type="button" class="cui-button">Button</button>
* </div>
*/

/**
* @name Large Buttons
* @description Create large buttons by adding the <code>.cui-button--large</code> class to the button element.
*
* @category controls
* @component button
* @section large
*
*
* @html
*
* <div class="docs-example docs-example--spacing">
*   <button type="button" class="cui-button cui-button--large">Large Button</button>
* </div>
*/

/**
* @name Expanded Buttons
* @description Create block level buttons —those that span the full width of a parent— by adding <code>.cui-button--expand</code>.
*
* @category controls
* @component button
* @section expanded
*
*
* @html
*
*<div class="well" style="max-width: 600px; margin: 0 auto 10px;">
*  <div class="docs-example docs-example--spacing">
*    <button type="button" class="cui-button cui-button--expand">Expanded button</button>
*  </div>
*</div>
*/

/**
* @name Disabled Buttons
* @description Make buttons look unclickable by fading them back with opacity. Add the disabled attribute to <code>&lt;button&gt;</code> buttons and add the <code>.cui-button--disabled</code> class to <code>&lt;a&gt;</code> buttons.
*
* @category controls
* @component button
* @section disabled
*
*
* @html
*
<div class="docs-example docs-example--spacing">
  <button type="button" class="cui-button" disabled="disabled">Disabled &lt;button&gt;</button>
  <a href="javascript:void(0)" class="cui-button cui-button--disabled">Disabled &lt;a&gt;</a>
</div>
*/

/**
* @name Loading Buttons
* @description Change the State of Button to loading
*
* @category controls
* @component button
* @section loading
*
*
* @html
*
<div class="docs-example docs-example--spacing">
  <button type="button" class="cui-button" disabled="disabled">
    <div style="opacity: 1;">
      <div class="cui-loading" ng-if="isLoading" style="">
        <span class="icon icon-unread-badge_8"></span>&nbsp;<span class="icon icon-unread-badge_8"></span>&nbsp;<span class="icon icon-unread-badge_8"></span>
      </div>
    </div>
    <span style="opacity: 0;">Test Me</span>
  </button>
  <button type="button" class="cui-button cui-button--large" disabled="disabled">
    <div style="opacity: 1;">
      <div class="cui-loading" ng-if="isLoading" style="">
        <span class="icon icon-unread-badge_8"></span>&nbsp;<span class="icon icon-unread-badge_8"></span>&nbsp;<span class="icon icon-unread-badge_8"></span>
      </div>
    </div>
    <span style="opacity: 0;">Test Me</span>
  </button>
</div>
<div class="docs-example docs-example--spacing">
  <button type="button" class="cui-button cui-button--circle" disabled="disabled">
    <div class="cui-loading" ng-if="isLoading" style="">
      <span class="icon icon-unread-badge_8"></span>&nbsp;<span class="icon icon-unread-badge_8"></span>&nbsp;<span class="icon icon-unread-badge_8"></span>
    </div>
  </button>
  <button type="button" class="cui-button cui-button--circle cui-button--circle--large" disabled="disabled">
    <div class="cui-loading" ng-if="isLoading" style="">
      <span class="icon icon-unread-badge_8"></span>&nbsp;<span class="icon icon-unread-badge_8"></span>&nbsp;<span class="icon icon-unread-badge_8"></span>
    </div>
  </button>
</div>
*/

/**
* @name Circular Buttons
* @description Create circular buttons by adding the <code>.cui-button-circle</code> class to the button element.
*
* @category controls
* @component button
* @section circle
*
*
* @html
*
<button type="button" class="cui-button cui-button--circle cui-button--orange icon icon-search_20"></button>
<button type="button" class="cui-button cui-button--circle cui-button--large"><span class="icon icon-search_24"></span></button>
*/