// 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, box-shadow $ripple-fade-out-duration $ease-out;
    box-shadow: inset 0 0 0 2px transparent;
    background-color: $entry;
    color: $text;
  }

  @if $t == hover {
    background-color: $overlay-hover;
    box-shadow: inset 0 0 0 2px $overlay-hover;
  }

  @if $t == focus {
    background-color: $overlay-focus;
    box-shadow: inset 0 0 0 2px if($fc == $primary, $track, $fc);
  }

  @if $t == checked {
    background-color: $entry;
    box-shadow: inset 0 0 0 2px if($fc == $primary, $primary, $fc);
  }

  @if $t == disabled {
    box-shadow: inset 0 0 0 2px transparent;
    background-color: $entry;
    color: $text-disabled;
  }
  
  @if $t == solid {
    transition: $transition, box-shadow $ripple-fade-out-duration $ease-out;
    box-shadow: inset 0 0 0 2px transparent;
    background-color: mix($text, $base, 5%);
    color: $text;
  }

  @if $t == solid-hover {
    background-color: mix($text, $base, 10%);
    box-shadow: inset 0 0 0 2px $overlay-hover;
  }

  @if $t == solid-focus {
    background-color: mix($text, $base, 8%);
    box-shadow: inset 0 0 0 2px if($fc == $primary, $track, $fc);
  }

  @if $t == solid-checked {
    background-color: mix($text, $base, 5%);
    box-shadow: inset 0 0 0 2px if($fc == $primary, $primary, $fc);
  }

  @if $t == solid-disabled {
    box-shadow: inset 0 0 0 2px transparent;
    background-color: mix($text, $base, 3%);
    color: $text-disabled;
  }

  @if $t == raised-normal {
    transition: $transition, box-shadow $ripple-fade-out-duration $ease-out;
    border-image: none;
    box-shadow: inset 0 0 0 2px transparent;
    background-color: if($fc == $primary, $surface, $fc);
    color: if($fc == $primary, $text, on($fc));
  }

  @if $t == raised-hover {
    box-shadow: inset 0 0 0 2px $overlay-hover;
  }

  @if $t == raised-focus {
    border-image: none;
    box-shadow: inset 0 0 0 2px if($fc == $primary, $primary, $fc);
  }

  @if $t == raised-disabled {
    box-shadow: inset 0 0 0 2px transparent;
    background-color: $base-alt;
    color: $text-disabled;
  }
}


@mixin button($t) {
//
// button
//
// $t: button type
//

  @if $t == normal {
    transition: $transition,
                background-size $ripple-fade-out-duration $ease-out,
                background-image $ripple-fade-out-opacity-duration $ease-out;
    outline: none;
    box-shadow: inset 0 0 0 9999px transparent;
    background-color: $button;
    background-image: radial-gradient(circle, transparent 10%, transparent 0%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1000% 1000%;
    color: $text;
  }

  @if $t == hover {
    box-shadow: inset 0 0 0 9999px $overlay-hover;
  }

  @if $t == focus {
    box-shadow: 0 0 0 2px rgba($primary, 0.35);
  }

  @if $t == active {
    transition: $transition,
                background-size 0ms,
                background-image 0ms,
                border 0ms;
    animation: ripple $ripple-fade-in-duration $ease-out forwards;
    box-shadow: inset 0 0 0 9999px $overlay-hover;
    background-image: radial-gradient(circle, $overlay-active 10%, transparent 0%);
    background-size: 0% 0%;
  }

  @if $t == disabled {
    box-shadow: none;
    background-color: $fill;
    color: $text-disabled;
  }

  @if $t == checked {
    // box-shadow: inset 0 0 0 9999px transparent, $shadow-z2;
    background-color: $primary;
    color: on($primary);
  }

  @if $t == checked-hover {
    box-shadow: inset 0 0 0 9999px transparent;
  }

  @if $t == checked-disabled {
    box-shadow: inset 0 0 0 9999px $overlay-checked;
    background-color: $fill;
    color: $text-disabled;
  }

  @if $t == flat-normal {
    transition: $transition,
                border-image $ripple-fade-in-duration $ease-out,
                background-size $ripple-fade-out-duration $ease-out,
                background-image $ripple-fade-out-opacity-duration $ease-out;
    outline: none;
    box-shadow: inset 0 0 0 9999px transparent;
    background-color: transparent;
    background-image: radial-gradient(circle, transparent 10%, transparent 0%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1000% 1000%;
    color: $text-secondary;
  }

  @if $t == flat-hover {
    box-shadow: inset 0 0 0 9999px $overlay-hover;
    color: $text;
  }

  @if $t == flat-focus {
    box-shadow: inset 0 0 0 2px $overlay-focus;
    color: $text;
  }

  @if $t == flat-active {
    transition: $transition,
                border-image $ripple-fade-in-duration $ease-out,
                background-size 0ms,
                background-image 0ms;
    animation: ripple $ripple-fade-in-duration $ease-out forwards;
    box-shadow: inset 0 0 0 9999px $overlay-hover;
    background-image: radial-gradient(circle, $overlay-active 10%, transparent 0%);
    background-size: 0% 0%;
    color: $text;
  }

  @if $t == flat-disabled {
    box-shadow: none;
    background-color: transparent;
    color: $text-secondary-disabled;
  }

  @if $t == flat-checked {
    background-color: $overlay-checked;
    color: $text;
  }

  @if $t == flat-checked-disabled {
    background-color: $overlay-checked;
    color: $text-disabled;
  }
}


@mixin overshoot($p, $t:normal, $c:$text) {
//
// overshoot
//
// $p: position
// $t: type
// $c: base color
//
// possible $p values:
// top, bottom, right, left
//
// possible $t values:
// normal, backdrop
//

  $_small_gradient_length: 5%;
  $_big_gradient_length: 100%;

  $_position: center top;
  $_small_gradient_size: 100% $_small_gradient_length;
  $_big_gradient_size: 100% $_big_gradient_length;

  @if $p==bottom {
    $_position: center bottom;
    $_linear_gradient_direction: to top;
  }

  @else if $p==right {
    $_position: right center;
    $_small_gradient_size: $_small_gradient_length 100%;
    $_big_gradient_size: $_big_gradient_length 100%;
  }

  @else if $p==left {
    $_position: left center;
    $_small_gradient_size: $_small_gradient_length 100%;
    $_big_gradient_size: $_big_gradient_length 100%;
  }

  $_small_gradient_color: $c;
  $_big_gradient_color: $c;

  @if $c==$text {
    $_small_gradient_color: $border;
    $_big_gradient_color: $text;

    @if $t==backdrop { $_small_gradient_color: $fill; }
  }

  $_small_gradient: -gtk-gradient(radial,
                                  $_position, 0,
                                  $_position, 0.5,
                                  to($_small_gradient_color),
                                  to(rgba($_small_gradient_color, 0)));

  $_big_gradient: -gtk-gradient(radial,
                                $_position, 0,
                                $_position, 0.6,
                                from(rgba($_big_gradient_color, 0.07)),
                                to(rgba($_big_gradient_color, 0)));

  @if $t==normal {
    background-image: $_small_gradient, $_big_gradient;
    background-size: $_small_gradient_size, $_big_gradient_size;
  }

  @else if $t==backdrop {
    background-image: $_small_gradient;
    background-size: $_small_gradient_size;
  }

  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($p) {
//
// undershoot
//
// $p: position
//
// possible $p values:
// top, bottom, right, left
//

  $_undershoot_color_dark: $track;
  $_undershoot_color_light: transparent;

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

  @if ($p == left) or ($p == right) {
    $_gradient_dir: top;
    $_dash_bg_size: 1px 12px;
    $_gradient_repeat: repeat-y;
    $_bg_pos: $p 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-#{$p}: 1px;
  background-size: $_dash_bg_size;
  background-repeat: $_gradient_repeat;
  background-origin: content-box;
  background-position: $_bg_pos;
  margin: 0 4px;

  @if ($p == left) or ($p == right) {
    margin: 4px 0;
  }
}
