@use "sass:math";
@import "variables";

@mixin key($direction, $_size:$key_size, $_border_size:3px, $_offset:5px) {
  position: absolute;
  text-align: center;
  display: block;
  transform-origin: 50% 50%;
  line-height: $_size - 2 * $_border_size;
  width: $_size - 2 * $_border_size;
  height: $_size - 2 * $_border_size;
  content: '';
  border-radius: 999px;
  border-style: solid;
  $color: transparent;

  @if ($direction == "left") {
    transform: rotate(-90deg);
    $color: $left_color;
    padding-right: $_offset;
    width: $_size - 2 * $_border_size - $_offset;
  } @else if ($direction == "up") {
    $color: $up_color;
    padding-bottom: $_offset;
    line-height: $_size - 2 * $_border_size - $_offset;
    height: $_size - 2 * $_border_size - $_offset;
  }  @else if ($direction == "right") {
    transform: rotate(90deg);
    $color: $right_color;
    padding-left: $_offset;
    width: $_size - 2 * $_border_size - $_offset;
  }  @else if ($direction == "down") {
    transform: rotate(180deg);
    $color: $down_color;
    padding-top: $_offset;
    line-height: $_size - 2 * $_border_size - $_offset;
    height: $_size - 2 * $_border_size - $_offset;
  }

  border-color: $color;
  color: $color;
  background-image: url("../inline/arrow.svg?color=#{str-slice(unquote("#{$color}"), 2)}");
  background-size: 50%;
  background-position: center center;
  background-repeat: no-repeat;
}
