<script>export let path;
export let highlight = null;
export let inline = false;
let className = "";
export { className as class };
export let size = null;
export let spin = false;
export let spinInverse = false;
</script>

<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<svg
  viewBox="0 0 24 24"
  class="icon {className ? ` ${className}` : ''}"
  style={size ? `width: ${size}; height: ${size}; font-size: ${size};` : undefined}
  width={size}
  height={size}
  class:inline
  class:highlight={highlight && highlight !== 'inverse'}
  class:highlight-inverse={highlight === 'inverse'}
  on:click
>
  <g class:spin={spin || spinInverse} class:inverse={spinInverse}>
    <path d={path} />
  </g>
</svg>

<style>
  .icon {
    display: inline-block;
    height: 1rem;
    width: 1rem;
    fill: currentColor;
    stroke: none;
    font-size: 1rem;
    line-height: 1;
  }

  .icon-text {
    position: absolute;
    left: -0.2rem;
    bottom: 0rem;
    opacity: 1;
    background-color: var(--bg-primary);
  }
  .spin {
    animation: spin linear 0.8s infinite;
    transform-origin: center;
  }
  .inverse {
    animation-name: spin-inverse;
  }
  .highlight {
    filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.8));
  }
  .highlight-inverse {
    filter: drop-shadow(0 -1px 1px rgba(255, 255, 255, 0.8));
  }
  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes spin-inverse {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(-360deg);
    }
  }
</style>
