// TODO(jelbourn): Measure perf benefits for translate3d and will-change.
// TODO(jelbourn): Figure out if anchor hover underline actually happens in any browser.
@import 'button-base';
@import '../core/style/layout-common';
@import '../../cdk/a11y/a11y';

.mat-button, .mat-icon-button {
  @extend %mat-button-base;

  .mat-button-focus-overlay {
    transition: none;
    opacity: 0;
  }
}

// Only flat buttons (not raised, FABs or icon buttons) have a hover style.
// Use the same visual treatment for hover as for focus.
.mat-button:hover .mat-button-focus-overlay {
  opacity: 1;
}

.mat-raised-button {
  @extend %mat-raised-button;
}

.mat-fab {
  @include mat-fab($mat-fab-size, $mat-fab-padding);
}

.mat-mini-fab {
  @include mat-fab($mat-mini-fab-size, $mat-mini-fab-padding);
}

.mat-icon-button {
  padding: 0;

  // Reset the min-width from the button base.
  min-width: 0;

  width: $mat-icon-button-size;
  height: $mat-icon-button-size;

  flex-shrink: 0;

  line-height: $mat-icon-button-size;
  border-radius: $mat-icon-button-border-radius;

  i, .mat-icon {
    line-height: $mat-icon-button-line-height;
  }
}

// The text and icon should be vertical aligned inside a button
.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab {
  color: currentColor;
  .mat-button-wrapper > * {
    vertical-align: middle;
  }
}

// The ripple container should match the bounds of the entire button.
.mat-button-ripple, .mat-button-focus-overlay {
  @include mat-fill;

  // Disable pointer events for the ripple container and focus overlay because the container
  // will overlay the user content and we don't want to disable mouse events on the user content.
  // Pointer events can be safely disabled because the ripple trigger element is the host element.
  pointer-events: none;
}

// Element that overlays the button to show focus and hover effects.
.mat-button-focus-overlay {
  // The button spec calls for focus on raised buttons (and FABs) to be indicated with a
  // black, 12% opacity shade over the normal color (for both light and dark themes).
  background-color: rgba(black, 0.12);
  border-radius: inherit;
  opacity: 0;

  transition: $mat-button-focus-transition;

  @include cdk-high-contrast {
    // Note that IE will render this in the same way, no
    // matter whether the theme is light or dark. This helps
    // with the readability of focused buttons.
    background-color: rgba(white, 0.5);
  }
}

// For round buttons, the ripple container should clip child ripples to a circle.
.mat-button-ripple-round {
  border-radius: 50%;
  // z-index needed to make clipping to border-radius work correctly.
  // http://stackoverflow.com/questions/20001515/
  z-index: 1;
}

// Add an outline to make it more visible in high contrast mode.
@include cdk-high-contrast {
  .mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab {
    outline: solid 1px;
  }
}