@mixin cwui-button {
  .button {
    @include button-base;
    @include button-style($background: #eaf3fc);
    text-decoration: none;

    // Sizes
    @each $size, $value in map-remove($button-sizes, default) {
      &.#{$size} {
        font-size: $value;
      }
    }

    border: 1px solid #9bc2eb;
  }

  .button.secondary {
    @include button-style(
      $background: $white,
      $color: #6f695e
    );
    border-color: #ddd7c9;

    &:focus,
    &:hover,
    &:visited
    &:active {
      background-color: #efece5;
    }
  }

  // Call to Action Button
  .button.cta {
    @include button-style(
      $background: $chico-red,
      $background-hover: #540303,
      $background-hover-lightness: 10%,
      $color: $white
    );
    border: 0;
  }

  // Link and transparent/clear button
  .button.link,
  .button.link:hover,
  .button.transparent,
  .button.transparent:hover {
    background-color: transparent;
    border: 0;
  }

  .button.link:hover {
    text-decoration: underline;
  }

  // Success/Positive button
  .button.success {
    @include button-style(
      $background: map-get($button-palette, success),
      $background-hover: scale-color(map-get($button-palette, success), $lightness: -15%),
      $color: #fff
    );
    border-color: map-get($button-palette, success);
  }

  // Expanded button
  @include deprecate('4.0.0', 'Use .expanded instead') {
    .button.expand {
      @include button-expand;
    }
  }

  .button.expanded {
    @include button-expand;
  }


  // Buttons with text and an icon
  // <a class="button"><i class="icon icon--left"></i> Button Text</a>
  .button {
    > .icon,
    > .icon--left {
      margin-right: rem-calc(5);
    }

    > .icon--right {
      margin-left: rem-calc(5);
    }
  }

  // Icon Button
  // <a class="icon button"><i class="icon"></i></a>
  .button.icon {
    .icon {
      margin: 0;
    }
  }

  // Compact button
  .button.compact {
    padding: .5em .7em;
  }

  // Hollow Button
  .button.hollow {
    @include button-hollow;
    @include button-hollow-style(
      $color: #5176a9,
      $hover-lightness: -40%
    );

    @each $style,
    $value in map-remove($button-palette, primary) {
      &.#{$style} {
        color: $value;
        border-color: currentColor;
      }
    }
  }

  // Disabled button
  .button.disabled,
  .button[disabled] {
    @include button-disabled;
  }

  .input-group > :last-child .button {
    border-left: 0;
  }
}