@import '../../../scss/common.scss';

.loader {
  @apply relative;
  @apply text-secondary;
  display: inline-block;
  width: 45px;
  height: 45px;

  div {
    transform-origin: 40px 40px;
    animation: loader 1.2s linear infinite;
  }

  div:after {
    content: ' ';
    display: block;
    position: absolute;
    top: 3.2px;
    left: 36.8px;
    width: 5px;
    height: 15px;
    border-radius: 20%;
    background: currentColor;
  }

  div:nth-child(1) {
    transform: rotate(0deg);
    animation-delay: -1.1s;
  }
  div:nth-child(2) {
    transform: rotate(45deg);
    animation-delay: -1s;
  }
  div:nth-child(3) {
    transform: rotate(90deg);
    animation-delay: -0.9s;
  }
  div:nth-child(4) {
    transform: rotate(135deg);
    animation-delay: -0.8s;
  }
  div:nth-child(5) {
    transform: rotate(180deg);
    animation-delay: -0.7s;
  }
  div:nth-child(6) {
    transform: rotate(225deg);
    animation-delay: -0.6s;
  }
  div:nth-child(7) {
    transform: rotate(-90deg);
    animation-delay: -0.5s;
  }
  div:nth-child(8) {
    transform: rotate(-45deg);
    animation-delay: -0.4s;
  }
  @keyframes loader {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
}
