// Copyright (c) 2016, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

@import 'package:angular_components/css/material/material';

$min-ripple-size: 32px;
$ripple-size: 256px;
$max-ripple-size: 1024px;

$min-ripple-opacity: 0;
$max-ripple-opacity: $mat-ripple-opacity;

material-ripple {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  border-radius: inherit;
  contain: strict;

  // Create a new stacking context so that ripples are contained within
  // non-rectangular containers.
  transform: translateX(0);
}

.__acx-ripple {
  position: absolute;
  width: $ripple-size;
  height: $ripple-size;
  background-color: currentColor;
  border-radius: 50%;
  pointer-events: none;
  will-change: opacity, transform;
  opacity: $min-ripple-opacity;

  &.fallback {
    animation: __acx-ripple $mat-transition-mobile linear;
    transform: translateZ(0);
  }
}

@keyframes __acx-ripple {
  from {
    opacity: $min-ripple-opacity;
    transform: translateZ(0) scale($min-ripple-size / $ripple-size);
  }

  25%, 50% {
    opacity: $max-ripple-opacity;
  }

  to {
    opacity: $min-ripple-opacity;
    transform: translateZ(0) scale($max-ripple-size / $ripple-size);
  }
}
