@import '../theming/theming';


$md-ripple-focused-opacity: 0.1;
$md-ripple-background-fade-duration: 300ms;
$md-ripple-background-default-color: rgba(0, 0, 0, 0.0588);
$md-ripple-foreground-initial-opacity: 0.25;
$md-ripple-foreground-default-color: rgba(0, 0, 0, 0.0588);


@mixin md-ripple() {
  // The host element of an md-ripple directive should always have a position of "absolute" or
  // "relative" so that the ripple divs it creates inside itself are correctly positioned.
  [md-ripple] {
    overflow: hidden;
  }

  [md-ripple].md-ripple-unbounded {
    overflow: visible;
  }

  .md-ripple-background {
    background-color: $md-ripple-background-default-color;
    opacity: 0;
    transition: opacity $md-ripple-background-fade-duration linear;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }

  .md-ripple-unbounded .md-ripple-background {
    display: none;
  }

  .md-ripple-background.md-ripple-active {
    opacity: 1;
  }

  .md-ripple-focused .md-ripple-background {
    opacity: 1;
  }

  .md-ripple-foreground {
    background-color: $md-ripple-foreground-default-color;
    border-radius: 50%;
    pointer-events: none;
    opacity: $md-ripple-foreground-initial-opacity;
    position: absolute;
    // The transition duration is manually set based on the ripple size.
    transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);
  }

  .md-ripple-foreground.md-ripple-fade-in {
    opacity: 1;
  }

  .md-ripple-foreground.md-ripple-fade-out {
    opacity: 0;
  }
}

@mixin md-ripple-theme($theme) {
  $accent: map-get($theme, accent);

  .md-ripple-focused .md-ripple-background {
    background-color: md-color($accent, $md-ripple-focused-opacity);
  }
}


// A mixin, which generates temporary ink ripple on a given component.
// To be removed once the real ripple is applied to all elements.
// When $bindToParent is set to true, it will check for the focused class on the same selector as you included
// that mixin.
// It is also possible to specify the color palette of the temporary ripple. By default it uses the
// accent palette for its background.
@mixin md-temporary-ink-ripple($component, $bindToParent: false) {
  // TODO(mtlin): Replace when ink ripple component is implemented.
  // A placeholder ink ripple, shown when keyboard focused.
  .md-ink-ripple {
    border-radius: 50%;
    opacity: 0;
    height: 48px;
    left: 50%;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: opacity ease 280ms, background-color ease 280ms;
    width: 48px;
  }

  // Fade in when radio focused.
  #{if($bindToParent, '&', '')}.md-#{$component}-focused .md-ink-ripple {
    opacity: 1;
  }

  // TODO(mtlin): This corresponds to disabled focus state, but it's unclear how to enter into
  // this state.
  #{if($bindToParent, '&', '')}.md-#{$component}-disabled .md-ink-ripple {
    background-color: #000;
  }
}