$button-border-radius: 3px !default;
$button-fab-border-radius: 50% !default;
$button-icon-border-radius: $button-fab-border-radius;

$button-line-height: rem(3.60) !default;
$button-padding: 0 rem(0.600) !default;
$button-margin: rem(0.600) rem(0.800) !default;
$button-min-width: rem(8.800) !default;

// Fab buttons
$button-fab-line-height: rem(5.600) !default;
$button-fab-mini-width: rem(4.00) !default;
$button-fab-mini-height: rem(4.00) !default;
$button-fab-mini-line-height: rem(4.00) !default;

$button-fab-toast-offset: $button-fab-height * 0.75 !default;

$icon-button-height: rem(4.000) !default;
$icon-button-width: rem(4.000) !default;
$icon-button-margin: rem(0.600) !default;

// Fix issue causing buttons in Firefox to be 2px bigger than they should
button.md-button::-moz-focus-inner {
  border: 0;
}

.md-button {
  border-radius: $button-border-radius;
  box-sizing: border-box;
  color: currentColor;

  user-select: none;
  position: relative; //for child absolute-positioned <canvas>

  outline: none;
  border: 0;
  display: inline-block;
  align-items: center;
  padding: $button-padding;
  margin: $button-margin;
  line-height: $button-line-height;
  min-height: $button-line-height;
  background: transparent;
  white-space: nowrap;
  // override for FAB, icon buttons, etc.
  min-width: $button-min-width;

  text-align: center;

  // Always uppercase buttons
  text-transform: uppercase;
  font-weight: 500;
  font-size: $body-font-size-base;
  font-style: inherit;
  font-variant: inherit;
  font-family: inherit;
  text-decoration: none;

  cursor: pointer;
  overflow: hidden;   // for ink containment

  transition: box-shadow $swift-ease-out-duration $swift-ease-out-timing-function,
              background-color $swift-ease-out-duration $swift-ease-out-timing-function;

  &:focus {
    outline: none;
  }

  &:hover, &:focus {
    text-decoration: none;
  }

  &.ng-hide, &.ng-leave {
    transition: none;
  }

  &.md-cornered {
    border-radius: 0;
  }

  &.md-icon {
    padding: 0;
    background: none;
  }

  &.md-raised {
    &:not([disabled]) {
      @include md-shadow-bottom-z-1();
    }
  }

  &.md-icon-button {
    margin: 0 $icon-button-margin;
    height: $icon-button-height;
    min-width: 0;
    line-height: $icon-size;
    padding: $baseline-grid;
    width: $icon-button-width;
    border-radius: $button-icon-border-radius;
    .md-ripple-container {
      border-radius: $button-icon-border-radius;
      background-clip: padding-box;
      overflow: hidden;
      // The following hack causes Safari/Chrome to respect overflow hidden for ripples
      -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC');
    }
  }

  &.md-fab {

    // Include the top/left/bottom/right fab positions
    @include fab-all-positions();

    z-index: $z-index-fab;

    line-height: $button-fab-line-height;
    min-width: 0;
    width: $button-fab-width;
    height: $button-fab-height;
    vertical-align: middle;

    @include md-shadow-bottom-z-1();
    border-radius: $button-fab-border-radius;
    background-clip: padding-box;
    overflow: hidden;

    transition: $swift-ease-in;
    transition-property: background-color, box-shadow, transform;
    .md-ripple-container {
      border-radius: $button-fab-border-radius;
      background-clip: padding-box;
      overflow: hidden;
      // The following hack causes Safari/Chrome to respect overflow hidden for ripples
      -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC');
    }

    &.md-mini {
      line-height: $button-fab-mini-line-height;
      width: $button-fab-mini-width;
      height: $button-fab-mini-height;
    }

    &.ng-hide, &.ng-leave {
      transition: none;
    }
  }

  &:not([disabled]) {
    &.md-raised,
    &.md-fab {
      &.md-focused {
        @include md-shadow-bottom-z-1();
      }
      &:active {
        @include md-shadow-bottom-z-2();
      }
    }
  }

  .md-ripple-container {
    border-radius: $button-border-radius;
    background-clip: padding-box;
    overflow: hidden;
    // The following hack causes Safari/Chrome to respect overflow hidden for ripples
    -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC');
  }
}

.md-toast-open-top {
  .md-button.md-fab-top-left,
  .md-button.md-fab-top-right {
    transition: $swift-ease-out;
    transform: translate3d(0, $button-fab-toast-offset, 0);
    &:not([disabled]) {
      &.md-focused,
      &:hover {
        transform: translate3d(0, $button-fab-toast-offset - 1, 0);
      }
    }
  }
}

.md-toast-open-bottom {
  .md-button.md-fab-bottom-left,
  .md-button.md-fab-bottom-right {
    transition: $swift-ease-out;
    transform: translate3d(0, -$button-fab-toast-offset, 0);
    &:not([disabled]) {
      &.md-focused,
      &:hover {
        transform: translate3d(0, -$button-fab-toast-offset - 1, 0);
      }
    }
  }
}

.md-button-group {
  display: flex;
  flex: 1;
  width: 100%;
}

.md-button-group > .md-button {
  flex: 1;

  display: block;

  overflow: hidden;

  width: 0;

  border-width: 1px 0px 1px 1px;
  border-radius: 0;

  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;

  &:first-child {
    border-radius: 2px 0px 0px 2px;
  }
  &:last-child {
    border-right-width: 1px;
    border-radius: 0px 2px 2px 0px;
  }
}
// IE only
@media screen and (-ms-high-contrast: active) {
  .md-button.md-raised,
  .md-button.md-fab {
    border: 1px solid #fff;
  }
}