nukeop/nuclear

@import "../../common.scss";

button.nuclear.ui.button {
  position: relative;
  
  background: $bglight;
  color: $white;
  white-space: nowrap;

  &:hover {
    background: mix($bglight, $bgdark, 90%);
  }

  &:focus {
    background: darken(mix($bglight, $bgdark, 90%), 5%);
  }

  &:active {
    background: darken(mix($bglight, $bgdark, 90%), 7.5%);
  }

  &.basic {
    color: $white !important;
    background: transparent !important;
    box-shadow: 0 0 0 1px rgba($white, 0.75) inset;

    &:hover {
      background: rgba($white, 0.2) !important;
    }

    &:focus {
      background: rgba($white, 0.3) !important;
    }

    &:active {
      background: rgba($white, 0.4) !important;
    }

    i {
      color: $white;
    }
  }

  $colors: ("green", "blue", "purple", "pink", "orange", "red");
  $colorvars: (
    "green": $green,
    "blue": $blue,
    "purple": $purple,
    "pink": $pink,
    "orange": $orange,
    "red": $red,
  );
  @each $color in $colors {
    $button-color: map-get($colorvars, $color);
    &.#{$color} {
      background: $button-color;

      &.text {
        color: $button-color;
      }

      &:hover {
        background: mix($button-color, $bglight, 90%);
      }

      &:focus {
        background: darken(mix($button-color, $bglight, 90%), 5%);
      }

      &:active {
        background: darken(mix($button-color, $bglight, 90%), 7.5%);
      }
    }
  }

  &.borderless {
    box-shadow: none;
  }

  &.text {
    background: transparent;
    font-weight: normal;
    padding: 0;
    margin: 0 0.5em;

    &:hover, &:focus, &:active {
      background: transparent;
    }

    &:hover {
      color: $white;
    }
  }
}