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


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

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

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

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

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

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

  .np-ripple-foreground {
    background-color: $np-ripple-foreground-default-color;
    border-radius: 50%;
    pointer-events: none;
    opacity: $np-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);
  }

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

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

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

  .np-ripple-focused .np-ripple-background {
    background-color: np-color($accent, $np-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 np-temporary-ink-ripple($component, $bindToParent: false) {
  // TODO(mtlin): Replace when ink ripple component is implemented.
  // A placeholder ink ripple, shown when keyboard focused.
  .np-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, '&', '')}.np-#{$component}-focused .np-ink-ripple {
    opacity: 1;
  }

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