// Copyright 2016 Google Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions://
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.//
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.

@import "@material/animation/functions";
@import "@material/elevation/mixins";
@import "@material/elevation/variables";
@import "@material/ripple/mixins";
@import "@material/ripple/variables";
@import "@material/theme/functions";
@import "@material/theme/mixins";
@import "@material/rtl/mixins";
@import "./variables";

@mixin mdc-fab-accessible($container-color) {
  $fill-tone: mdc-theme-tone($container-color);

  @include mdc-fab-container-color($container-color);

  @if ($fill-tone == "dark") {
    @include mdc-fab-ink-color(text-primary-on-dark);
    @include mdc-states(text-primary-on-dark);
  } @else {
    @include mdc-fab-ink-color(text-primary-on-light);
    @include mdc-states(text-primary-on-light);
  }
}

@mixin mdc-fab-container-color($color) {
  @include mdc-theme-prop(background-color, $color, $edgeOptOut: true);
}

@mixin mdc-fab-icon-size($width, $height: $width) {
  .mdc-fab__icon {
    width: $width;
    height: $height;
    font-size: $height;
  }
}

@mixin mdc-fab-ink-color($color) {
  @include mdc-theme-prop(color, $color);
}

@mixin mdc-fab-extended-fluid {
  width: 100%;
}

@mixin mdc-fab-extended-padding($icon-padding, $label-padding) {
  @include mdc-fab-extended-label-padding($label-padding);

  // Offsets the outer label padding by deducting it from icon padding.
  .mdc-fab__icon {
    @include mdc-rtl-reflexive-property(
      margin,
      $icon-padding - $label-padding,
      $icon-padding);
  }

  // For Extended FAB with text label followed by icon.
  .mdc-fab__label + .mdc-fab__icon {
    @include mdc-rtl-reflexive-property(
      margin,
      $icon-padding,
      $icon-padding - $label-padding);
  }
}

@mixin mdc-fab-extended-label-padding($label-padding) {
  padding: 0 $label-padding;
}

$mdc-fab-icon-enter-delay_: 90ms;
$mdc-fab-icon-enter-duration_: 180ms;
$mdc-fab-extended-height_: 48px;

@mixin mdc-fab-base_ {
  @include mdc-ripple-surface;
  @include mdc-ripple-radius-bounded;
  @include mdc-elevation(6);

  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  padding: 0;
  transition:
    box-shadow $mdc-elevation-transition-duration $mdc-elevation-transition-timing-function,
    opacity 15ms linear 30ms,
    mdc-animation-enter(transform, $mdc-fab-icon-enter-duration_ + $mdc-fab-icon-enter-delay_);
  border: none;
  border-radius: 50%;
  fill: currentColor;
  cursor: pointer;
  user-select: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  overflow: hidden;

  &::-moz-focus-inner {
    padding: 0;
    border: 0;
  }

  &:hover,
  &:focus {
    @include mdc-elevation(8);
  }

  &:active {
    @include mdc-elevation(12);
  }

  &:active,
  &:focus {
    // TODO(acdvorak): Should this be paired with states and/or ripple? We don't want to disable outline
    // (an accessibility/usability feature) unless we're confident that there is also a visual indication that the
    // element has focus. If the client has customized the DOM in some unexpected way, and is certain that another
    // element will receive focus instead, they can always override this property manually in their CSS.
    outline: none;
  }

  &:hover {
    cursor: pointer;
  }

  // This allows for using SVGs within them to align properly in all browsers.
  // Can remove once: https://bugzilla.mozilla.org/show_bug.cgi?id=1294515 is resolved.

  // stylelint-disable selector-max-type
  // postcss-bem-linter: ignore
  > svg {
    width: 100%;
  }
  // stylelint-enable selector-max-type
}

@mixin mdc-fab--mini_ {
  width: 40px;
  height: 40px;
}

@mixin mdc-fab--extended_ {
  @include mdc-typography(button);
  @include mdc-fab-extended-padding(
    $mdc-fab-extended-icon-padding,
    $mdc-fab-extended-label-padding);

  width: auto;
  max-width: 100%;
  height: $mdc-fab-extended-height_;
  border-radius: $mdc-fab-extended-height_ / 2;
}

@mixin mdc-fab__icon_ {
  transition: mdc-animation-enter(transform, $mdc-fab-icon-enter-duration_, $mdc-fab-icon-enter-delay_);
  fill: currentColor;
  will-change: transform;
}

@mixin mdc-fab__label_ {
  justify-content: flex-start;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

@mixin mdc-fab__icon-overrides_ {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@mixin mdc-fab--exited_ {
  transform: scale(0);
  transition:
    opacity 15ms linear 150ms,
    mdc-animation-exit-permanent(transform, 180ms);
  opacity: 0;

  .mdc-fab__icon {
    transform: scale(0);
    transition: mdc-animation-exit-permanent(transform, 135ms);
  }
}