button:focus { outline: 0; }

button {
  &.unstyled {
    background: none;
    border: none;
  }
}

.btn {
  display: inline-block;
  border: none;
  height: $btn-height;
  line-height: $btn-height;
  padding: $btn-padding;
  border-radius: $base-border-radius;
  background-color: $button-bg-color;
  color: #fff;
  vertical-align: middle;
  text-align: center;
  transition: .2s;

  &:hover { background-color: lighten($button-bg-color, 8%); }

  &.raised {
    @extend .z-depth-1;

    &:hover {
      background-color: lighten($button-bg-color, 5%);
      @extend .z-depth-1-half;
    }
  }

  &.hollow {
    background-color: transparent;
    border: 2px solid $button-hollow-color;
    line-height: $btn-height - 4px;
    border-radius: 4px;
    color: $button-hollow-color;
    transition: 0s;
    &:hover {
      background-color: $button-hollow-color;
      color: $button-hollow-hover-color;
    }
    &.bright {
      border: 2px solid $button-bright-color;
      color: $button-bright-color;
      &:hover {
        background-color: $button-bright-color;
        color: $button-bright-hover-color;
      }
    }

  }


  &.disabled {
    box-shadow: none;
    background-color: $disabled-bg-color;
    color: $disabled-color;
    cursor: default;
    pointer-events: none;
  }

  &.large {
    height: $btn-large-height;
    line-height: $btn-large-height;
    padding: $btn-large-padding;

    &.hollow {
      line-height: $btn-large-height - 4;
    }
  }

  &.huge {
    padding: $btn-huge-padding;
    height: $btn-huge-height;
    line-height: $btn-huge-height;
    font-size: 1.2em;

    &.hollow {
      line-height: $btn-huge-height - 4;
    }
  }


}