HBM/md-components

/* http://www.google.com/design/spec/components/buttons.html#buttons-usage */

.mdc-Button {
  font-size: 14px;
  min-width: 88px;
  height: 36px;
  background: none;
  border: none;
  padding: 0 16px;
  text-transform: uppercase;
  border-radius: 2px;
  outline: none;
  color: $color-accent;
  font-weight: 500;
  will-change: background;
  transition: background 0.25s;

  &:hover,
  &:focus {
    background: rgba($color-accent, 0.12);
  }

  &:active {
    background: rgba($color-accent, 0.24);
  }

  &:disabled {
    color: rgba($color-accent, 0.5);
    background: none;
  }

  &--dense {
    font-size: 13px;
    height: 32px;
  }

  &--filled {
    color: text-color($color-accent-text);
    background: $color-accent;

    &:disabled {
      color: text-color($color-accent-text, Disabled);
      background: darken(saturate($color-accent, 12%), 10%);
    }

    &:hover,
    &:focus {
      background: darken($color-accent, 12%);
    }

    &:active {
      background: darken($color-accent, 18%);
    }
  }

  /* http://www.google.com/design/spec/components/buttons.html#buttons-flat-raised-buttons */

  &--raised {
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.26);
    transition: background 0.25s, box-shadow 0.25s;
    will-change: background, box-shadow;

    &:active {
      box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.3);
    }
  }
}