// Drawing mixins

// generic drawing of more complex things

//
// Helper mixin for drawing visible focus rings
//
// If $target is specified, the focus ring is applied to the specified child element.
// If $outer is true, the focus ring extends outward. Otherwise, it extends inward.
// If $within is true, use focus-within instead of focus:focus-visible
//
@mixin focus-ring($target: null, $width: 2px, $offset: -$width, $outer: false, $focus-state: ':focus:focus-visible', $fc: $focus_border_color) {
  transition-property: outline, outline-width, outline-offset, outline-color;
  transition-duration: 300ms;
  animation-timing-function: ease-in-out;
  & #{$target} {
    outline: 0 solid transparent;
    outline-offset: if($outer, $offset + 4px, $offset + $width + 4px);
  }

  &#{$focus-state} #{$target} {
    outline-color: $fc;
    outline-width: $width;
    outline-offset: $offset;
  }
}

@mixin entry($t, $fc:$focus_border_color) {
//
// Entries drawing function
//
// $t: entry type
// $fc: focus color
//
// possible $t values:
// normal, insensitive, osd, osd-focus, block_cursor;
//

  @if $t==normal {
    color: $text_color;
    border-color: $borders_color;
    background-color: $base_color;
    // for the transition to work the number of shadows in different states needs to match, hence the transparent shadow here.
  }
  @if $t==insensitive {
    filter: opacity(.5);
  }
  @if $t==osd {
    color: $osd_text_color;
    border-color: $borders_color;
    background-color: transparentize(black, 0.5);
    background-clip: padding-box;
    box-shadow: none;
  }
  @if $t==osd-focus {
    color: $osd_text_color;
    border-color: $borders_color;
    background-color: transparentize(black, 0.5);
    background-clip: padding-box;
  }
  @if $t==block_cursor {
    color: $base_color;
    background-color: $text_color;
  }
}

@mixin overshoot($p) {
//
// overshoot
//
// $p: position
//
// possible $p values:
// top, bottom, right, left
//

  $_small_gradient_length: 3%;
  $_big_gradient_length: 50%;

  $_small_gradient_size: 100% $_small_gradient_length;
  $_big_gradient_size: 100% $_big_gradient_length;

  @if $p==right or $p==left {
    $_small_gradient_size: $_small_gradient_length 100%;
    $_big_gradient_size: $_big_gradient_length 100%;
  }

  $_small_gradient: radial-gradient(farthest-side at $p,
                                    gtkalpha(currentColor, 0.2) 85%,
                                    gtkalpha(currentColor, 0));

  $_big_gradient: radial-gradient(farthest-side at $p,
                                  gtkalpha(currentColor, 0.07),
                                  gtkalpha(currentColor, 0));

  background-image: $_small_gradient, $_big_gradient;
  background-size: $_small_gradient_size, $_big_gradient_size;

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

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