open-nomad/ui/app/styles/core/buttons.scss

$button-box-shadow-standard: 0 2px 0 0 rgba($grey, 0.2);

.button {
  font-weight: $weight-bold;
  box-shadow: $button-box-shadow-standard;
  border: 1px solid transparent;
  text-decoration: none;

  &:hover,
  &.is-hovered {
    text-decoration: none;
  }

  &:active,
  &.is-active,
  &:focus,
  &.is-focused {
    box-shadow: $button-box-shadow-standard;
    text-decoration: none;
  }

  &.is-inverted.is-outlined {
    box-shadow: none;
    background: transparent;
  }

  &.is-inline {
    vertical-align: middle;
  }

  &.is-compact {
    padding: 0.25em 0.75em;
    margin: -0.25em -0.25em -0.25em 0;

    &.pull-right {
      margin-right: -1em;
    }
  }

  @each $name, $pair in $colors {
    $color: nth($pair, 1);
    $color-invert: nth($pair, 2);

    &.is-#{$name} {
      border-color: darken($color, 10%);

      &:hover,
      &.is-hovered {
        background-color: lighten($color, 5%);
        border-color: darken($color, 10%);
      }

      &:active,
      &.is-active {
        background-color: darken($color, 5%);
        border-color: darken($color, 10%);
        box-shadow: $button-box-shadow-standard;
      }

      &:focus,
      &.is-focused {
        border-color: darken($color, 10%);
        box-shadow: $button-box-shadow-standard;
      }

      &.is-outlined {
        border-color: $grey-lighter;

        &.is-important {
          border-color: $color;
        }

        &:hover,
        &.is-hovered,
        &:focus,
        &.is-focused {
          background-color: transparent;
          border-color: darken($color, 10%);
          color: $color;
        }

        &:active,
        &.is-active {
          background-color: transparent;
          border-color: darken($color, 10%);
          color: darken($color, 10%);
        }
      }

      &.is-inverted.is-outlined {
        border-color: rgba($color-invert, 0.5);
        color: rgba($color-invert, 0.9);

        &:hover,
        &.is-hovered,
        &:focus,
        &.is-focused {
          background-color: transparent;
          border-color: $color-invert;
          color: $color-invert;
        }

        &:active,
        &.is-active {
          background-color: rgba($color-invert, 0.1);
          border-color: $color-invert;
          color: $color-invert;
          box-shadow: none;
        }
      }
    }
  }

  // When an icon in a button should be treated like text,
  // override the default Bulma behavior
  .icon.is-text {
    &:first-child:not(:last-child) {
      margin-left: 0;
      margin-right: 0;
    }
    &:last-child:not(:first-child) {
      margin-left: 0;
      margin-right: 0;
    }
    &:first-child:last-child {
      margin-left: 0;
      margin-right: 0;
    }
  }
}