/**
 * 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/theme/variables";
@import "./keyframes";
@import "./variables";

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

@mixin mdc-ripple-base() {
  --mdc-ripple-left: 0;
  --mdc-ripple-top: 0;
  --mdc-ripple-fg-size: 0;
  --mdc-ripple-surface-height: 0;
  --mdc-ripple-surface-width: 0;
  --mdc-ripple-fg-unbounded-transform-duration: 0ms;
  --mdc-ripple-xfo-x: center;
  --mdc-ripple-xfo-y: center;
  --mdc-ripple-fg-unbounded-opacity-duration: 0ms;
  --mdc-ripple-fg-unbounded-transform-duration: 0ms;
  --mdc-ripple-fg-approx-xf: 0;

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

@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: 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;
  transform: scale(1);
  transition: opacity 200ms 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);

  /* 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--background-active#{$pseudo} {
    opacity: .99999;
  }

  // When an element goes active, a foreground ripple will be triggered.
  // Therefore, we adjust the transition duration for the correct "wind-
  // up" animation.
  &.mdc-ripple-upgraded--background-active:active#{$pseudo} {
    transition-duration: 600ms;
  }

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

  &.mdc-ripple-upgraded--unbounded#{$pseudo} {
    top: var(--mdc-ripple-top);
    left: var(--mdc-ripple-left);
    width: var(--mdc-ripple-fg-size);
    height: var(--mdc-ripple-fg-size);
  }
}

@mixin mdc-ripple-fg-base_($config) {
  @include mdc-ripple-color_($config);

  position: absolute;
  width: var(--mdc-ripple-fg-size);
  height: var(--mdc-ripple-fg-size);
  transform: scale(0);
  transform-origin: center center;
  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);

  /* 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 */

  &:not(.mdc-ripple-upgraded--unbounded)#{$pseudo} {
    top: calc(var(--mdc-ripple-top) - var(--mdc-ripple-fg-size) / 2);
    left: calc(var(--mdc-ripple-left) - var(--mdc-ripple-fg-size) / 2);
    transform-origin: center center;
  }

  &.mdc-ripple-upgraded--unbounded#{$pseudo} {
    top: var(--mdc-ripple-top);
    left: var(--mdc-ripple-left);
    transform-origin: var(--mdc-ripple-xfo-x) var(--mdc-ripple-xfo-y);
  }

  &.mdc-ripple-upgraded--foreground-bounded-active-fill#{$pseudo} {
    animation-fill-mode: forwards;
    animation: 800ms mdc-ripple-fg-radius-in, 400ms mdc-ripple-fg-opacity-out;
  }

  &.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded--foreground-unbounded-activation#{$pseudo} {
    transform: scale(1);
    transition:
      opacity 110ms linear,
      transform var(--mdc-ripple-fg-unbounded-transform-duration) linear 80ms;
    opacity: 1;
  }

  &.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded--foreground-unbounded-deactivation#{$pseudo} {
    animation:
      mdc-ripple-fg-unbounded-opacity-deactivate var(--mdc-ripple-fg-unbounded-opacity-duration) linear,
      mdc-ripple-fg-unbounded-transform-deactivate var(--mdc-ripple-fg-unbounded-transform-duration) $mdc-ripple-easing-fn;
  }
}