@import "../../core/style/variables";
@import "../../core/style/shadows";

// TODO(jelbourn): This goes away.
@import "../../core/style/default-theme";

// TODO(jelbourn): Move variables and mixins into a partial file.
// TODO(jelbourn): Measure perf benefits for translate3d and will-change.
// TODO(jelbourn): Figure out if anchor hover underline actually happens in any browser.


// Standard button sizing.
$md-button-padding: 0 rem(0.600) !default;
$md-button-min-width: rem(8.800) !default;
$md-button-margin: rem(0.600) rem(0.800) !default;
$md-button-line-height: rem(3.60) !default;
$md-button-border-radius: 3px !default;

// FAB sizing.
$md-fab-size: rem(5.600) !default;
$md-fab-line-height: rem(5.600) !default;
$md-fab-padding: rem(1.60) !default;
$md-fab-mini-size: rem(4.00) !default;
$md-fab-mini-line-height: rem(4.00) !default;

/** Mixin to create distinct classes for fab positions, e.g. ".md-fab-position-bottom-right". */
@mixin md-fab-position($spot, $top: auto, $right: auto, $bottom: auto, $left: auto) {
  .md-fab-position-#{$spot} {
    top: $top;
    right: $right;
    bottom: $bottom;
    left: $left;
    position: absolute;
  }
}

/** Styles for all disabled buttons. */
@mixin md-button-disabled() {
  color: md-color($md-foreground, disabled);
  background-color: transparent;
  cursor: default;
}

/** Base styles for all buttons. */
@mixin md-button-base() {
  box-sizing: border-box;
  position: relative;

  // Reset browser <button> styles.
  background: transparent;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  outline: none;
  border: none;

  // Make anchors render like buttons.
  display: inline-block;
  white-space: nowrap;
  text-decoration: none;
  vertical-align: middle;

  // Typography.
  font-size: $md-body-font-size-base;
  font-weight: 500;

  // Sizing.
  padding: $md-button-padding;
  margin: $md-button-margin;
  min-width: $md-button-min-width;
  line-height: $md-button-line-height;
  border-radius: $md-button-border-radius;

  // Animation.
  transition: background $swift-ease-out-duration $swift-ease-out-timing-function,
              box-shadow $swift-ease-out-duration $swift-ease-out-timing-function;

  // Hide the browser focus indicator, instead applying our own focus style on background-color.
  &:focus {
    outline: none;
  }

  &:hover, &:focus {
    // Remove anchor underline again for more specific modifiers.
    text-decoration: none;
  }

  // Use a CSS class for focus style because we only want to render the focus style when
  // the focus originated from a keyboard event (see JS source for more details).
  &:hover, &.md-button-focus {
    background: md-color($md-background, 500, 0.2);
  }

  &.md-primary {
    color: md-color($md-primary);
  }

  &.md-accent {
    color: md-color($md-accent);
  }

  // Use the [disabled] attribute instead of the :disabled pseudo-class because anchors
  // cannot technically be :disabled.
  &[disabled] {
    @include md-button-disabled();
  }
}

/** Base styles for raised buttons, including FABs. */
@mixin md-raised-button() {
  @include md-button-base();

  // Force hardware acceleration.
  transform: translate3d(0, 0, 0);

  box-shadow: $md-shadow-bottom-z-1;

  &:active {
    box-shadow: $md-shadow-bottom-z-2;
  }

  &[disabled] {
    box-shadow: none;
  }

  &.md-primary {
    color: md-color($md-primary, default-contrast);
    background-color: md-color($md-primary);

    &:hover, &.md-button-focus {
      background-color: md-color($md-primary, 600);
    }
  }

  &.md-accent {
    color: md-color($md-accent, default-contrast);
    background-color: md-color($md-accent);

    &:hover, &.md-button-focus {
      background-color: md-color($md-accent, A700);
    }
  }

  &.md-primary, &.md-accent {
    &[disabled] {
      @include md-button-disabled();
    }
  }
}


[mdButton] {
  @include md-button-base();
}

[mdRaisedButton] {
  @include md-raised-button();

  color: md-color($md-background, default-contrast);
  background-color: md-color($md-background, 50);
}

[mdFab] {
  @include md-raised-button();

  z-index: $z-index-fab;

  border-radius: 50%;
  min-width: 0;
  width: $md-fab-size;
  height: $md-fab-size;
  line-height: $md-fab-line-height;
  vertical-align: middle;

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

// Styles for high contrast mode.
@media screen and (-ms-high-contrast: active) {
  [md-raised],
  [mdFab] {
    border: 1px solid #fff;
  }
}

$md-fab-pos-offset: ($md-fab-size - $md-fab-padding) / 2;
@include md-fab-position(bottom-right, auto, $md-fab-pos-offset, $md-fab-pos-offset, auto);
@include md-fab-position(bottom-left, auto, auto, $md-fab-pos-offset, $md-fab-pos-offset);
@include md-fab-position(top-right, $md-fab-pos-offset, $md-fab-pos-offset, auto, auto);
@include md-fab-position(top-left, $md-fab-pos-offset, auto, auto, $md-fab-pos-offset);
