//
// Copyright 2016 Google Inc. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//

@import "@material/animation/variables";
@import "@material/theme/variables";
@import "./keyframes";

@function mdc-ripple-default-config_() {
  @return (
    pseudo: null,
    radius: 100%,
    base-color: black,
    opacity: .06,
    theme-style: null
  );
}

@mixin mdc-ripple-base() {
  --mdc-ripple-surface-width: 0;
  --mdc-ripple-surface-height: 0;
  --mdc-ripple-fg-size: 0;
  --mdc-ripple-left: 0;
  --mdc-ripple-top: 0;
  --mdc-ripple-fg-scale: 1;
  --mdc-ripple-fg-translate-end: 0;
  --mdc-ripple-fg-translate-start: 0;

  will-change: transform, opacity;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

  &:not(.mdc-ripple-upgraded) {
    &:hover::before,
    &:focus::before,
    &:active::after {
      transition-duration: 85ms;
      opacity: .6;
    }
  }
}

@mixin mdc-ripple-color_($config) {
  $base-color: map-get($config, base-color);
  $opacity: map-get($config, opacity);
  $theme-style: map-get($config, theme-style);

  // stylelint-disable at-rule-empty-line-before, block-closing-brace-newline-after
  @if ($theme-style) {
    $theme-value: map-get($mdc-theme-property-values, $theme-style);
    $css-var: $theme-value;
    $css-var: var(--mdc-theme-#{$theme-style}, $theme-value);

    background-color: rgba($theme-value, $opacity);

    // See: https://drafts.csswg.org/css-color/#modifying-colors
    // While this is currently unsupported as of now, it will begin to work by default as browsers
    // begin to implement the CSS 4 color spec.
    @supports (background-color: color(green a(10%))) {
      background-color: color(#{$css-var} a(#{percentage($opacity)}));
    }
  } @else {
    background-color: rgba($base-color, $opacity);
  }

  // stylelint-enable at-rule-empty-line-before, block-closing-brace-newline-after
}

@mixin mdc-ripple-bg-base_($config) {
  $radius: map-get($config, radius);

  @include mdc-ripple-color_($config);

  position: absolute;
  top: calc(50% - #{$radius});
  left: calc(50% - #{$radius});
  width: $radius * 2;
  height: $radius * 2;
  transition: opacity 250ms linear;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

@mixin mdc-ripple-bg($config: ()) {
  $config: map-merge(mdc-ripple-default-config_(), $config);
  $pseudo: map-get($config, pseudo);
  $radius: map-get($config, radius);

  // stylelint-disable at-rule-empty-line-before, block-closing-brace-newline-after
  @if ($pseudo) {
    &#{$pseudo} {
      @include mdc-ripple-bg-base_($config);

      content: "";
    }
  } @else {
    @include mdc-ripple-bg-base_($config);
  }
  // stylelint-enable at-rule-empty-line-before, block-closing-brace-newline-after

  &.mdc-ripple-upgraded#{$pseudo} {
    top: calc(50% - #{$radius});
    left: calc(50% - #{$radius});
    width: $radius * 2;
    height: $radius * 2;
    transform: scale(0);
    transform: scale(var(--mdc-ripple-fg-scale, 0));
  }

  &.mdc-ripple-upgraded--background-focused#{$pseudo} {
    opacity: .99999;
  }

  &.mdc-ripple-upgraded--background-active-fill#{$pseudo} {
    transition-duration: 120ms;
    opacity: 1;
  }

  &.mdc-ripple-upgraded--unbounded#{$pseudo} {
    top: calc(50% - #{$radius / 2});
    top: var(--mdc-ripple-top, calc(50% - #{$radius / 2}));
    left: calc(50% - #{$radius / 2});
    left: var(--mdc-ripple-left, calc(50% - #{$radius / 2}));
    width: $radius;
    width: var(--mdc-ripple-fg-size, $radius);
    height: $radius;
    height: var(--mdc-ripple-fg-size, $radius);
    transform: scale(0);
    transform: scale(var(--mdc-ripple-fg-scale, 0));
  }
}

@mixin mdc-ripple-fg-base_($config) {
  $radius: map-get($config, radius);

  @include mdc-ripple-color_($config);

  position: absolute;
  top: calc(50% - #{$radius});
  left: calc(50% - #{$radius});
  width: $radius * 2;
  height: $radius * 2;
  transition: opacity 250ms linear;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

@mixin mdc-ripple-fg($config: ()) {
  $config: map-merge(mdc-ripple-default-config_(), $config);
  $pseudo: map-get($config, pseudo);
  $radius: map-get($config, radius);

  // stylelint-disable at-rule-empty-line-before, block-closing-brace-newline-after
  @if ($pseudo) {
    &#{$pseudo} {
      @include mdc-ripple-fg-base_($config);

      content: "";
    }
  } @else {
    @include mdc-ripple-fg-base_($config);
  }
  // stylelint-enable at-rule-empty-line-before, block-closing-brace-newline-after

  &.mdc-ripple-upgraded {
    &#{$pseudo} {
      top: 0;
      left: 0;
      width: $radius;
      width: var(--mdc-ripple-fg-size, $radius);
      height: $radius;
      height: var(--mdc-ripple-fg-size, $radius);
      transform: scale(0);
      transform-origin: center center;
      opacity: 0;
    }
  }

  &:not(.mdc-ripple-upgraded--unbounded)#{$pseudo} {
    transform-origin: center center;
  }

  &.mdc-ripple-upgraded--unbounded#{$pseudo} {
    top: 0;
    top: var(--mdc-ripple-top, 0);
    left: 0;
    left: var(--mdc-ripple-left, 0);
    width: $radius;
    width: var(--mdc-ripple-fg-size, $radius);
    height: $radius;
    height: var(--mdc-ripple-fg-size, $radius);
    transform: scale(0);
    transform-origin: center center;
  }

  &.mdc-ripple-upgraded--foreground-activation#{$pseudo} {
    animation: 300ms mdc-ripple-fg-radius-in forwards, 83ms mdc-ripple-fg-opacity-in forwards;
  }

  &.mdc-ripple-upgraded--foreground-deactivation#{$pseudo} {
    // Retain transform from mdc-ripple-fg-radius-in activation
    transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
    animation: 250ms mdc-ripple-fg-opacity-out;
  }
}