/**
 * Create a poping dot effect to catch user attention on a particular item
 * This mixin affect the :before and :after pseudo selector of the item
 *
 * @param 		{String} 		[$vertical-align=top] 			Where to put the dot verticaly (top,middle,bottom)
 * @param 		{String} 		[$align=left] 					Where to put the dot horizontaly (left,center,right)
 * @param 		{Number} 		[$size=20px] 					The size of the dot
 * @param 		{Color} 		[$color=primary] 				The color of the dot
 * @param 		{Number} 		[$offset-top=0] 				The offset top
 * @param 		{Number} 		[$offset-right=0] 				The offset right
 * @param 		{Number} 		[$offset-bottom=0] 				The offset bottom
 * @param 		{Number} 		[$offset-left=0] 				The offset left
 *
 * @example
 * .my-cool-element {
 * 		\@include s-hey(
 * 			$align : right,
 * 			$color : secondary,
 * 			$size : 10px,
 * 			$offset-top : -10px,
 * 			$offset-right : -10px
 * 		);
 * }
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com> (https://olivierbossel.com)
 */
@mixin s-hey(
  $vertical-align: top,
  $align: left,
  $size: 20px,
  $color: primary,
  $offset-top: 0,
  $offset-right: 0,
  $offset-bottom: 0,
  $offset-left: 0
) {
  @if $_sugar-test-arguments {
    $t: s-test-argument(
      "s-hey",
      "vertical-align",
      (top, middle, bottom),
      $vertical-align
    );
    $t: s-test-argument("s-hey", "align", (left, center, right), $align);
    $t: s-test-argument("s-hey", "size", number, $size);
    $t: s-test-argument("s-hey", "color", color, $color);
    $t: s-test-argument("s-hey", "margin-left", number, $offset-left);
    $t: s-test-argument("s-hey", "margin-top", number, $offset-top);
    $t: s-test-argument("s-hey", "margin-bottom", number, $offset-bottom);
    $t: s-test-argument("s-hey", "margin-right", number, $offset-right);
  }

  $color: s-color($color);

  $position: s-position-map(
    $vertical-align: $vertical-align,
    $align: $align
  );

  @keyframes s-hey {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

  position: relative;
  &:before {
    $ratio: 2;
    $s: round($size / $ratio);
    content: "";
    position: absolute;
    // top : ($size / 2 - $s / 2) + $top;
    // right : ($size / 2 - $s / 2) + $right;
    height: $s;
    width: $s;
    @include s-corner($s);
    background-color: $color;

    @each $prop, $value in $position {
      @if $prop == top or $prop == bottom or $prop == left or $prop == right {
        @if $prop == top and $value > 0% or $prop == left and $value > 0% {
          $value: "#{$value} - #{($size / 2 - $s / 2)}";
        } @else {
          $value: "#{$value} + #{($size / 2 - $s / 2)}";
        }
        @if $prop == top {
          $value: "#{$value} + #{$offset-top} - #{$offset-bottom}";
        } @else if $prop == right {
          $value: "#{$value} + #{$offset-right} - #{$offset-left}";
        } @else if $prop == bottom {
          $value: "#{$value} + #{$offset-bottom} - #{$offset-top}";
        } @else if $prop == left {
          $value: "#{$value} + #{$offset-left} - #{$offset-right}";
        }
        @if $prop != position or $prop != transform {
          #{$prop}: calc(#{$value});
        }
      }
    }
  }
  &:after {
    $border-width: floor(($size - $size / 2) / 3.5);
    content: "";
    position: absolute;
    // top: $top; right: $right;
    height: $size - $border-width * 2;
    width: $size - $border-width * 2;
    @include s-corner($size / 2);
    background-color: transparent;
    border: solid $color;
    border-width: $border-width; // animates
    boz-sizing: border-box;
    @include s-animation(s-hey infinite);

    @each $prop, $value in $position {
      @if $prop == top {
        $value: "#{$value} + #{$offset-top} - #{$offset-bottom}";
      } @else if $prop == right {
        $value: "#{$value} + #{$offset-right} - #{$offset-left}";
      } @else if $prop == bottom {
        $value: "#{$value} + #{$offset-bottom} - #{$offset-top}";
      } @else if $prop == left {
        $value: "#{$value} + #{$offset-left} - #{$offset-right}";
      }
      @if $prop != position or $prop != transform {
        #{$prop}: calc(#{$value});
      }
    }
  }

  @include s-handle-nested(hey) {
    @content;
  }
}