// 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 {
  .mat-button-focus-overlay {
    opacity: 0;
  }
}

// Only basic and stroked 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-stroked-button:hover {
  .mat-button-focus-overlay {
    opacity: 0.04;
  }
}

// Disable the hover styles on non-hover devices. Since this is more of a progressive
// enhancement and not all desktop browsers support this kind of media query, we can't
// use something like `@media (hover)`.
@media (hover: none) {
  .mat-button:hover,
  .mat-stroked-button:hover {
    .mat-button-focus-overlay {
      opacity: 0;
    }
  }
}

// Should be placed after the `:hover` styles so the focused
// styling coming in from `mat-button-base` takes precedence.
.mat-button, .mat-icon-button, .mat-stroked-button, .mat-flat-button {
  @include mat-button-base;
}

.mat-raised-button {
  @include mat-raised-button;
}

.mat-stroked-button {
  border: $mat-stroked-button-border-width solid currentColor;
  padding: $mat-stroked-button-padding;
  line-height: $mat-stroked-button-line-height;

  // Since the stroked button has has an actual border that reduces the available space for
  // child elements such as the ripple container or focus overlay, an inherited border radius
  // for the absolute-positioned child elements does not work properly. This is because the
  // child element cannot expand to the same boundaries as the parent element with a border.
  // In order to work around this issue by *not* hiding overflow, we adjust the child elements
  // to fully cover the actual button element. This means that the border-radius would be correct
  // then. See: https://github.com/angular/components/issues/13738
  .mat-button-ripple.mat-ripple, .mat-button-focus-overlay {
    top: -$mat-stroked-button-border-width;
    left: -$mat-stroked-button-border-width;
    right: -$mat-stroked-button-border-width;
    bottom: -$mat-stroked-button-border-width;
  }
}

.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 ripple container and focus overlay should match the bounds of the entire button.
// Increase specificity for the ripple container because ripple styles are part of
// the `mat-core` mixin and can potentially overwrite the absolute position of the container.
.mat-button-ripple.mat-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;

  // Inherit the border radius from the parent so that focus overlay and ripples don't exceed the
  // parent button boundaries. Note that an inherited border radius does not work properly if
  // the actual button element does have a border because it causes the inner content to be
  // smaller. We have special logic for stroked buttons to handle this scenario.
  border-radius: inherit;
}

// Fixes the ripples not clipping to the border radius on Safari. Uses `:not(:empty)`
// in order to avoid creating extra layers when there aren't any ripples.
.mat-button-ripple.mat-ripple:not(:empty) {
  transform: translateZ(0);
}

// Element that overlays the button to show focus and hover effects.
.mat-button-focus-overlay {
  opacity: 0;
  transition: $mat-button-focus-transition;

  ._mat-animation-noopable & {
    transition: none;
  }

  @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: #fff;
  }

  @include cdk-high-contrast(black-on-white) {
    // For the black-on-white high contrast mode, the browser will set this element
    // to white, making it blend in with the background, hence why we need to set
    // it explicitly to black.
    background-color: #000;
  }
}

// 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;
}

// Elements inside of all type of buttons should be vertical aligned in the middle.
.mat-button, .mat-flat-button, .mat-stroked-button, .mat-raised-button, .mat-icon-button,
.mat-fab, .mat-mini-fab {
  .mat-button-wrapper > * {
    vertical-align: middle;
  }
}

// Align icon-buttons correctly inside of standard, fill, and outline form-field appearances.
.mat-form-field:not(.mat-form-field-appearance-legacy) {
  .mat-form-field-prefix,
  .mat-form-field-suffix {
    .mat-icon-button {
      display: block;
      font-size: inherit;
      width: 2.5em;
      height: 2.5em;
    }
  }
}

// Add an outline to make buttons more visible in high contrast mode. Stroked buttons
// don't need a special look in high-contrast mode, because those already have an outline.
@include cdk-high-contrast {
  .mat-button, .mat-flat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab {
    outline: solid 1px;
  }
}