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

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

$button-line-height: 25px !default;
$button-padding: 2px 6px 3px !default;

// Fab buttons
$button-fab-width: 56px !default;
$button-fab-height: 56px !default;
$button-fab-padding: 16px !default;
$button-fab-mini-width: 40px !default;
$button-fab-mini-height: 40px !default;

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

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

[md-button] {
  user-select: none;

  // TODO(jelbourn): What canvas?
  position: relative; //for child absolute-positioned <canvas>

  outline: none;
  border: 0;
  padding: 6px;
  margin: 0;
  background: transparent;
  white-space: nowrap;

  text-align: center;

  // TODO(jelbourn): wat?
  font-weight: 500;
  font-style: inherit;
  font-variant: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: 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,
  transform $swift-ease-out-duration $swift-ease-out-timing-function;

  &:focus {
    outline: none;
  }

  &:hover {
    text-decoration: none;
  }

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

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

  &.md-raised {
    transform: translate3d(0, 0, 0);


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

  &.md-fab {
    // .md-fab-bottom-right
    @include fab-position(
        bottom-right,
        auto,
        ($button-fab-width - $button-fab-padding) / 2,
        ($button-fab-height - $button-fab-padding) / 2,
        auto);

    // .md-fab-bottom-left
    @include fab-position(
        bottom-left,
        auto,
        auto,
        ($button-fab-height - $button-fab-padding) / 2,
        ($button-fab-width - $button-fab-padding) / 2);

    // .md-fab-top-right
    @include fab-position(
        top-right,
        ($button-fab-height - $button-fab-padding) / 2,
        ($button-fab-width - $button-fab-padding) / 2,
        auto,
        auto);

    // .md-fab-top-left
    @include fab-position(
        top-left,
        ($button-fab-height - $button-fab-padding) / 2,
        auto,
        auto,
        ($button-fab-width - $button-fab-padding) / 2);


    z-index: $z-index-fab;

    width: $button-fab-width;
    height: $button-fab-height;

    border-radius: 50%;

    @extend .md-shadow-bottom-z-1;
    overflow: hidden;

    transform: translate3d(0, 0, 0);

    transition: 0.2s linear;
    transition-property: transform, box-shadow;


    // When there is an md-icon inside of an [md-button].
    & md-icon {
      line-height: $button-fab-height;
      margin-top: 0;
    }

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

  }

  &:not([disabled]) {
    &.md-raised,
    &.md-fab {
      &:focus,
      &:hover {
        transform: translate3d(0, -1px, 0);
        @extend .md-shadow-bottom-z-2;
      }
    }
  }
}

// TODO
.md-toast-open-top {
  [md-button].md-fab-top-left,
  [md-button].md-fab-top-right {
    transform: translate3d(0, $button-fab-toast-offset, 0);
    &:not([disabled]) {
      &:focus,
      &:hover {
        transform: translate3d(0, $button-fab-toast-offset - 1, 0);
      }
    }
  }
}

// TODO
.md-toast-open-bottom {
  [md-button].md-fab-bottom-left,
  [md-button].md-fab-bottom-right {
    transform: translate3d(0, -$button-fab-toast-offset, 0);
    &:not([disabled]) {
      &:focus,
      &:hover {
        transform: translate3d(0, -$button-fab-toast-offset - 1, 0);
      }
    }
  }
}

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

// TODO
.md-button-group > [md-button] {
  flex: 1;

  display: block;

  overflow: hidden;

  width: 0;

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

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

  &:first-child {
    border-radius: 2px 0 0 2px;
  }
  &:last-child {
    border-right-width: 1px;
    border-radius: 0 2px 2px 0;
  }
}


// ------------------------ Button theme ----------------------------------------------------------

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

// The ELEMENT '[md-button]' is the host.
// The CLASS '[md-button]' is the shadow root.

md-toolbar [md-button].md-fab {
  background-color: white;
}


// Because of Shadow DOM emulation, the modifier classes are applied to the [md-button]
// element (host), but the style needs to be changed for the shadow content (.[md-button]).
[md-button] {
  border-radius: $button-border-radius;

  // When the user explictly applies the primary color.
  &.md-primary {
    color: md-color($md-primary);
  }

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

  // When the user explictly applies the accent color.
  &.md-accent {
    color: md-color($md-accent);
  }

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

  // When the user explictly applies the warn color.
  &.md-warn {
    color: md-color($md-warn);
  }

  &.md-warn.md-fab,
  &.md-warn.md-raised {
    color: md-color($md-warn, default-contrast);
    background-color: md-color($md-warn);
  }

  // When the button is a fab without an explicit color applied.
  &.md-fab {
    border-radius: $button-fab-border-radius;
    background-color: md-color($md-accent);
    color: md-color($md-accent, default-contrast);
  }

  // When the button is raised without an explicit color applied.
  &.md-raised {
    color: md-color($md-background, default-contrast);
    background-color: md-color($md-background, 50);
  }
}

// Hover and focus styles (only applied when the button is not disabled).
// The modifiers for :focus and :hover actually apply to the element in the
// shadow DOM (the .[md-button]).
[md-button]:not([disabled])  {
  // Default hover/focus background.
  &:focus,
  &:hover {
    background-color: md-color($md-background, 500, 0.2);
  }

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

  &.md-accent.md-fab,
  &.md-accent.md-raised {
    &:hover,
    &:focus {
      background-color: md-color($md-accent, 700);
    }
  }

  &.md-warn.md-fab,
  &.md-warn.md-raised {
    &:hover,
    &:focus {
      background-color: md-color($md-warn, 700);
    }
  }

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

  &.md-raised {
    &:hover,
    &:focus {
      background-color: md-color($md-background, 200);
    }
  }
}

[md-button][disabled],
[md-button][disabled].md-fab,
[md-button][disabled].md-raised, {
  color: md-color($md-foreground, disabled);
  background-color: transparent;
  cursor: not-allowed;
}