// utils
@mixin buttonBase() {
  text-transform: uppercase;
  background: none;
  border: none;
  outline: none;
  text-decoration: none;
  user-select: none;
  padding: 0;

  > .buttonContent {
    line-height: 1;
    width: 100%;
    height: 100%;
    @include center;
  }

  display: inline-block;
  color: inherit; // for <a />
}

@mixin circleButton($size) {
  @include circle;
  width: $size;
  height: $size;
}

@mixin rectangleButton($padding) {
  @include roundCorner;
  height: 36px;
  padding-left: $padding;
  padding-right: $padding;
  font-size: $s_font_body;

  &--small {
    height: 24px;
    font-size: $s_font_caption;
  }
}


// flat buttons
@mixin darkFlatBtn() {
  color: $c_text_black_primary;

  @include respondTo_hoverable {
    background-color: rgba(#999999, 0.2);
  };

  &:active, &.is_active {
    background-color: rgba(#999999, 0.4);
  }

  &[disabled] {
    color: rgba(black, 0.26);

    .mdIcon {
      color: rgba(black, 0.12);
    }
  }
}

@mixin lightFlatBtn() {
  color: $c_text_white_primary;

  @include respondTo_hoverable {
    background-color: rgba(#CCCCCC, 0.12);
  };

  .mdIcon {
    color: inherit;
  }

  &:active {
    background-color: rgba(#CCCCCC, 0.25);
  }

  &[disabled] {
    color: rgba(white, 0.3);

    .mdIcon {
      color: rgba(white, 0.3);
    }
  }
}

@mixin coloredFlatBtn($color) {
  color: $color;
  .mdIcon { color: $color; }

  @include respondTo_hoverable {
    background-color: rgba($color, 0.12);
  };

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

@mixin flatButton() {
  @include buttonBase;
  @include darkFlatBtn;
  &--white {
    @include coloredFlatBtn(white);
  }

  &--accent {
    @include coloredFlatBtn($c_accent);
  }

  &--primary {
    @include coloredFlatBtn($c_primary);
  }
}


// paper buttons
@mixin paperButton($normalDepth, $raisedDepth) {
  @include buttonBase;
  @include depth($normalDepth);

  color: $c_text_black_primary;
  background-color: #E0E0E0;
  transition: box-shadow 100ms;

  @include respondTo_hoverable {
    @include depth($raisedDepth);
  };

  &:active {
    @include depth($raisedDepth);
  }

  &[disabled] {
    background-color: rgba(black, 0.12);
    color: rgba(black, 0.26);
    @include depth(0);
  }

  &--white {
    background-color: white;
    color: $c_text_black_primary;
  }

  &--black {
    background-color: black;
    color: $c_text_white_primary;
  }

  &--accent {
    background-color: $c_accent;
    color: $c_text_white_primary;
  }

  &--primary {
    background-color: $c_primary;
    color: $c_text_white_primary;
  }
}