// Clear Button
// --------------------------------------------------

button,
[button] {

  &[clear] {
    border-color: transparent;
    background: transparent;
    color: darken-or-lighten($button-color);

    &.activated {
      opacity: 0.4;
    }
  }

}


// Clear Button Color Mixin
// --------------------------------------------------

@mixin button-clear($fg-color) {

  &[clear] {
    border-color: transparent;
    background: transparent;
    color: $fg-color;
  }

}


// Generate Clear Button Colors
// --------------------------------------------------

@each $color, $value in auxiliary-colors() {

  button[#{$color}],
  [button][#{$color}] {

    $fg-color: darken-or-lighten($value);
    @include button-clear($fg-color);

  }

}