// Outline Button
// --------------------------------------------------

button,
[button] {

  &[outline] {
    border: 1px solid $button-color;
    background: transparent;
    color: $button-color;

    &.activated {
      opacity: 1;
      color: $background-color;
      background-color: $button-color;
    }
  }

}


// Outline Button Color Mixin
// --------------------------------------------------

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

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

    &.activated {
      color: $background-color;
      background-color: $fg-color;
    }
  }

}


// Outline Clear Button Colors
// --------------------------------------------------

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

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

    $fg-color: darken-or-lighten($value, 5%);
    @include button-outline($fg-color);

  }

}