//
// Copyright 2019 Stijn de Witt. Some rights reserved.
// Licensed under the MIT Open Source license. 
// https://opensource.org/licenses/MIT
// See LICENSE for details.
//
// Based on code copyright 2018 Google Inc. All Rights Reserved.
// Licensed under the Apache License, Version 2.0.
// http://www.apache.org/licenses/LICENSE-2.0
// See LICENSE-MDC for details.
// 
// Unless required by applicable law or agreed to in writing, software
// distributed under these licenses is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the licenses for the specific language governing permissions and
// limitations under these licenses.
// 

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

@mixin mdc-fab-accessible($container-color) {
  $fill-tone: 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);
}

$mdc-fab-icon-enter-delay_: 90ms;
$mdc-fab-icon-enter-duration_: 180ms;

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

  display: inline-flex;
  position: relative;
  justify-content: center;
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  padding: 0;
  transition:
    box-shadow $elevation-transition-duration $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 elevation(8);
  }

  &:active {
    @include 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__icon_ {
  margin: auto;
  transition: mdc-animation-enter(transform, $mdc-fab-icon-enter-duration_, $mdc-fab-icon-enter-delay_);
  fill: currentColor;
  will-change: transform;
}

@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);
  }
}