// generic drawing of more complex things


// ripple effect animations

@keyframes ripple {
  to { background-size: 1000% 1000%; }
}

@keyframes ripple-on-slider {
  to { background-size: auto, 1000% 1000%; }
}

@keyframes ripple-on-headerbar {
  from {
    background-image: radial-gradient(circle, $primary 0%, transparent 0%);
  }

  to {
    background-image: radial-gradient(circle, $primary 100%, transparent 0%);
  }
}


@mixin entry($t, $fc: $primary) {
//
// entry
//
// $t: entry type
// $fc: focus color
//

  @if $t == normal {
    transition: $transition, border-image $ripple-fade-in-duration $ease-out;
    border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
                                  $fc 0%,
                                  transparent 0%)
                                  0 0 0 / 0 0 0px;
    box-shadow: inset 0 0 0 9999px transparent, inset 0 -1px if($fc == $primary, $stroke, $fc);
    background-color: $entry-fill;
    color: $text;
  }

  @if $t == hover {
    box-shadow: inset 0 0 0 9999px $overlay-hover, inset 0 -1px if($fc == $primary, $stroke, $fc);
  }

  @if $t == focus {
    box-shadow: inset 0 0 0 9999px $overlay-focus, inset 0 -1px if($fc == $primary, $stroke, $fc);
  }

  @if $t == checked {
    border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
                                  $fc 100%,
                                  transparent 0%)
                                  0 0 2 / 0 0 2px;
  }

  @if $t == disabled {
    box-shadow: inset 0 0 0 9999px transparent, inset 0 -1px $stroke-disabled;
    background-color: $entry-fill;
    color: $text-disabled;
  }

  @if $t == raised-normal {
    transition: $transition;
    border-image: none;
    box-shadow: $shadow-z1;
    background-color: if($fc == $primary, $surface, $fc);
    color: if($fc == $primary, $text, on($fc));
  }

  @if $t == raised-hover {
    box-shadow: $shadow-z3;
  }

  @if $t == raised-focus {
    border-image: none;
    box-shadow: $shadow-z3;
  }

  @if $t == raised-disabled {
    box-shadow: $shadow-z1;
    background-color: $base-alt;
    color: $text-disabled;
  }
}


$ripple-transition-property: all, border-image, background-size, background-image;
$ripple-transition-duration: $duration, $ripple-fade-in-duration, $ripple-fade-out-duration, $ripple-fade-out-opacity-duration;
$ripple-active-transition-duration: $duration, $ripple-fade-in-duration, 0ms, 0ms;

%ripple {
  transition-property: $ripple-transition-property;
  transition-duration: $ripple-transition-duration;
  transition-timing-function: $ease-out;
  outline: none;
  background-image: radial-gradient(circle, transparent 10%, transparent 0%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1000% 1000%;

  &:active {
    transition-duration: $ripple-active-transition-duration;
    animation: ripple $ripple-fade-in-duration $ease-out forwards;
    background-size: 0% 0%;
  }
}

@mixin raised-ink-color($color, $opacity-modifier: 0) {
  @if saturation($color) > 50% {
    $opacity-modifier: .04;
  }

  box-shadow: inset 0 0 0 9999px transparent, $shadow-z2;

  &:drop(active),
  &:hover {
    box-shadow: inset 0 0 0 9999px transparent, $shadow-z4;
  }

  &:focus {
    box-shadow: inset 0 0 0 9999px rgba($color, $overlay-focus-opacity + $opacity-modifier), $shadow-z4;
  }

  &:active {
    box-shadow: inset 0 0 0 9999px rgba($color, $overlay-hover-opacity + $opacity-modifier), $shadow-z8;
    background-image: radial-gradient(circle, rgba($color, $overlay-active-opacity + $opacity-modifier) 10%, transparent 0%);
  }
}

@mixin ink-color($color, $opacity-modifier: 0, $fg: true, $activated: false) {
  @if saturation($color) > 50% {
    $opacity-modifier: .04;
  }

  @if $fg {
    color: $color;
  }

  @if $activated {
    background-color: rgba($color, $overlay-checked-opacity + $opacity-modifier);
  }

  box-shadow: inset 0 0 0 9999px transparent;

  &:drop(active),
  &:hover {
    box-shadow: inset 0 0 0 9999px rgba($color, $overlay-hover-opacity + $opacity-modifier);
  }

  &:focus {
    box-shadow: inset 0 0 0 9999px rgba($color, $overlay-focus-opacity + $opacity-modifier);
  }

  &:active {
    background-image: radial-gradient(circle, rgba($color, $overlay-active-opacity + $opacity-modifier) 10%, transparent 0%);
  }
}

@mixin list-item {
  &:drop(active):not(:active),
  &:hover:not(:active) {
    transition-property: $ripple-transition-property, box-shadow;
    transition-duration: $ripple-transition-duration, 0ms;
  }
}


@mixin overshoot($side) {
  $valid-sides: top, bottom, left, right;

  @if not index($valid-sides, $side) {
    @error "#{$side} is not a valid side. Expected one of #{$valid-sides}.";
  }

  $_position: center $side;

  @if $side == left or $side == right {
    $_position: $side center;
  }

  background-image: -gtk-gradient(radial,
                                  $_position, 0,
                                  $_position, 0.75,
                                  to(rgba($primary, 0.24)),
                                  to(transparent));

  background-repeat: no-repeat;
  background-position: $_position;

  background-color: transparent; // reset some properties to be sure to not inherit them somehow
  border: none;                  //
  box-shadow: none;              //
}


@mixin undershoot($side) {
  $valid-sides: top, bottom, left, right;

  @if not index($valid-sides, $side) {
    @error "#{$side} is not a valid side. Expected one of #{$valid-sides}.";
  }

  $_undershoot_color_dark: $stroke;
  $_undershoot_color_light: transparent;

  $_gradient_dir: left;
  $_dash_bg_size: 12px 1px;
  $_gradient_repeat: repeat-x;
  $_bg_pos: left $side;

  @if $side == left or $side == right {
    $_gradient_dir: top;
    $_dash_bg_size: 1px 12px;
    $_gradient_repeat: repeat-y;
    $_bg_pos: $side top;
  }

  background-color: transparent; // shouldn't be needed, but better to be sure

  background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
                                    $_undershoot_color_light 50%,
                                    $_undershoot_color_dark 50%);

  padding-#{$side}: 1px;
  background-size: $_dash_bg_size;
  background-repeat: $_gradient_repeat;
  background-origin: content-box;
  background-position: $_bg_pos;
}