.#{$spinner} {
  --spinner-width: #{size(24px)};
  --spinner-height: #{size(24px)};
  --spinner-duration: 2s;
  --spinner-color: var(--text-regular);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  vertical-align: middle;
  width: var(--spinner-width);
  height: var(--spinner-height);
  color: var(--spinner-color);
  &.around-right {
    .spinner-wrap {
      animation: spinner-rotate var(--spinner-duration) linear infinite;
    }
  }

  &.around-left {
    .spinner-wrap {
      animation: spinner-rotate var(--spinner-duration) linear infinite;
      animation-direction: reverse;
    }
  }

  &.none {
    .spinner-wrap {
      animation: unset;
    }
  }

  &.is-finish {
    animation: unset;

    .spinner-wrap {
      animation: spinner-rotate 2s linear infinite;
      visibility: hidden;
      opacity: 0;
    }

    .show-result {
      visibility: visible;
      opacity: 1;
      transform: scale(1);
    }
  }

  .spinner-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 1;
    text-align: center;
    transition: 0.3s;

    .#{$icon} {
      width: 100%;
      height: 100%;
    }
  }

  .show-result {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 100%;
    visibility: hidden;
    opacity: 0;
    white-space: nowrap;
    transition: opacity 0.6s, visibility 0.6s;
    .#{$icon} {
      width: 100%;
      height: 100%;
    }
  }

  svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .tail {
    circle {
      fill: none;
      stroke: currentColor;
      stroke-dasharray: 90 120;
      stroke-dashoffset: 0;
      stroke-width: size(4px);
      stroke-linecap: round;
      animation: icon-loading-dash 1.5s ease-in-out infinite;
    }
  }

  @keyframes icon-loading-dash {
    0% {
      stroke-dasharray: 1 200;
      stroke-dashoffset: 0;
    }

    50% {
      stroke-dasharray: 90 150;
      stroke-dashoffset: size(-40px);
    }

    100% {
      stroke-dasharray: 90 150;
      stroke-dashoffset: size(-120px);
    }
  }

  @keyframes spinner-rotate {
    to {
      transform: rotate(1turn);
    }
  }
}