@import "../../ionic.globals";

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

.button-clear {
  border-color: transparent;
  background: transparent;
  color: color-shade($button-color);

  &.activated {
    opacity: 0.4;
    background: transparent;
  }

  &:hover:not(.disable-hover) {
    opacity: 0.6;
    color: color-shade($button-color);
  }
}



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

// TODO primary activated is wrong
@each $color-name, $color-value in auxiliary-colors() {

  $fg-color: color-shade($color-value);

  .button-clear-#{$color-name} {
    border-color: transparent;
    background: transparent;
    color: $fg-color;

    &.activated {
      opacity: 0.4;
      background: transparent;
    }

    &:hover:not(.disable-hover) {
      color: color-shade($fg-color);
    }
  }

}