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

@mixin mdc-ripple-surface() {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  will-change: transform, opacity;

  &::before,
  &::after {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    content: "";
  }

  &::before {
    transition: opacity $mdc-states-wash-duration linear;
    transform: scale(1);
    z-index: 1; // Ensure that the ripple wash for hover/focus states is displayed on top of positioned child elements
  }

  // Common styles for upgraded surfaces (some of these depend on custom properties set via JS or other mixins)

  &::after {
    top: 0;

    /* @noflip */
    left: 0;
    transform: scale(0);
    transform-origin: center center;
  }

  &:active { 
    &:after {
      animation-duration: $mdc-ripple-translate-duration;
      animation-name: mdc-ripple-fg-radius-in;
      animation-fill-mode: forwards;

      // $mdc-ripple-translate-duration mdc-ripple-fg-radius-in forwards,
      //   $mdc-ripple-fade-in-duration mdc-ripple-fg-opacity-in forwards;
    }
  }

  &.mdc-ripple-upgraded--foreground-deactivation::after {
    animation: $mdc-ripple-fade-out-duration mdc-ripple-fg-opacity-out;
    // Retain transform from mdc-ripple-fg-radius-in activation
    transform: translate(0) scale(1);
  }
}

@mixin mdc-states-base-color($color) {
  // Opacity styles are here (rather than in mdc-ripple-surface) to ensure that opacity is re-initialized for
  // cases where this mixin is used to override another inherited use of itself,
  // without needing to re-include mdc-ripple-surface.
  &::before,
  &::after {
    @include mdc-theme-prop(background-color, $color, $edgeOptOut: true);
  }
}

@mixin mdc-states-hover-opacity($opacity) {
  // Background wash styles, for both CSS-only and upgraded stateful surfaces
  &:hover::before {
    opacity: $opacity;
  }
}

@mixin mdc-states-focus-opacity($opacity, $has-nested-focusable-element: false) {
  // Focus overrides hover by reusing the ::before pseudo-element.
  // :focus-within generally works on non-MS browsers and matches when a *child* of the element has focus.
  // It is useful for cases where a component has a focusable element within the root node, e.g. text field,
  // but undesirable in general in case of nested stateful components.
  // We use a modifier class for JS-enabled surfaces to support all use cases in all browsers.
  $cssOnlyFocusSelector: if(
    $has-nested-focusable-element,
    "&:not(.mdc-ripple-upgraded):focus::before, &:not(.mdc-ripple-upgraded):focus-within::before",
    "&:not(.mdc-ripple-upgraded):focus::before"
  );

  #{$cssOnlyFocusSelector},
  &.mdc-ripple-upgraded--background-focused::before {
    // Note that this duration is only effective on focus, not blur
    transition-duration: 75ms;
    opacity: $opacity;
  }
}

@mixin mdc-states-press-opacity($opacity) {
  // Styles for non-upgraded (CSS-only) stateful surfaces

  &:not(.mdc-ripple-upgraded) {
    // Apply press additively by using the ::after pseudo-element
    &::after {
      transition: opacity $mdc-ripple-fade-out-duration linear;
    }

    &:active::after {
      transition-duration: $mdc-ripple-fade-in-duration;
      opacity: $opacity;
    }
  }
}

// Simple mixin for base states which automatically selects opacity values based on whether the ink color is
// light or dark.
@mixin mdc-states($color: black, $has-nested-focusable-element: false) {
  @include mdc-states-interactions_($color, $has-nested-focusable-element);
}

// Simple mixin for activated states which automatically selects opacity values based on whether the ink color is
// light or dark.
@mixin mdc-states-activated($color, $has-nested-focusable-element: false) {
  $activated-opacity: mdc-states-opacity($color, activated);

  &:active {
    // Stylelint seems to think that '&' qualifies as a type selector here?
    // stylelint-disable-next-line selector-max-type
    &::before {
      opacity: $activated-opacity;
    }

    @include mdc-states-interactions_($color, $has-nested-focusable-element, $activated-opacity);
  }
}

// Simple mixin for selected states which automatically selects opacity values based on whether the ink color is
// light or dark.
@mixin mdc-states-selected($color, $has-nested-focusable-element: false) {
  $selected-opacity: mdc-states-opacity($color, selected);

  &_selected {
    // stylelint-disable-next-line selector-max-type
    &::before {
      opacity: $selected-opacity;
    }

    @include mdc-states-interactions_($color, $has-nested-focusable-element, $selected-opacity);
  }
}

@mixin mdc-ripple-radius-bounded($radius: 100%) {
  &::before,
  &::after {
    top: calc(50% - #{$radius});

    /* @noflip */
    left: calc(50% - #{$radius});
    width: $radius * 2;
    height: $radius * 2;
  }

  &.mdc-ripple-upgraded::after {
    width: $radius;
    height: $radius;
  }
}

@mixin mdc-ripple-radius-unbounded($radius: 100%) {
  &::before,
  &::after {
    top: calc(50% - #{$radius / 2});

    /* @noflip */
    left: calc(50% - #{$radius / 2});
    width: $radius;
    height: $radius;
  }
}

@mixin mdc-states-interactions_($color, $has-nested-focusable-element, $opacity-modifier: 0) {
  @include mdc-states-base-color($color);
  @include mdc-states-hover-opacity(mdc-states-opacity($color, hover) + $opacity-modifier);
  @include mdc-states-focus-opacity(
    mdc-states-opacity($color, focus) + $opacity-modifier,
    $has-nested-focusable-element
  );
  @include mdc-states-press-opacity(mdc-states-opacity($color, press) + $opacity-modifier);
}