@use "sass:math";

@import "../config/index.scss";

// * Icon component
// *
// * 1. Fine tune the positioning of the icon
// * 2. Fill with currentColor by default
// *

.Icon {
  position: relative; // 1
  margin: 0;
  display: inline-block;
  width: 1em;
  height: 1em;
  font-size: 1em;
  vertical-align: middle;
  top: -1px; // 1
  fill: currentColor; // 2
}

// * Modifier for loader icon

$Icon--loader-offset: 130;
$Icon--loader-duration: 1.4s;

.Icon--loader {
  animation: rotator $Icon--loader-duration linear infinite;
  fill: none;
  stroke: currentColor;

  circle {
    stroke-dasharray: $Icon--loader-offset;
    stroke-dashoffset: 0;
    transform-origin: center;
    animation: dash $Icon--loader-duration ease-in-out infinite
  }
}

@keyframes rotator {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(270deg);
  }
}

@keyframes dash {
 0% {
   stroke-dashoffset: $Icon--loader-offset;
 }
 50% {
   stroke-dashoffset: math.div($Icon--loader-offset, 4);
   transform: rotate(135deg);
 }
 100% {
   stroke-dashoffset: $Icon--loader-offset;
   transform: rotate(450deg);
 }
}