@include export-module('co-loader-layout') {
  .co-loader {
    display: block;
    height: $cc-co-loader-size;
    width: auto;
    aspect-ratio: 1;
    .circle {
      fill: none;
    }
    .main-color {
      fill: $cc-co-loader-main-color;
    }

    .second-color {
      fill: $cc-co-loader-second-color;
    }
    #ring {
      transform-origin: center;
      animation: spin $cc-co-loader-ring-animation-duration linear infinite;
    }
    #ring-loader {
      fill: $cc-co-loader-background-color;
      stroke-width: $cc-co-loader-ring-width;
      stroke: $cc-co-loader-main-color;
      animation: dash $cc-co-loader-ring-animation-duration ease-in-out infinite;
      stroke-linecap: round;
    }
    .spinner-gradient-stop {
      stop-color: $cc-co-loader-main-color;
    }
    #i, #o, #n, #e {
      transform-origin: center;
      animation: morphingLetters $cc-co-loader-letter-animation-duration ease-in-out infinite;
      animation-direction: alternate;
    }
    #o {
      animation-delay: .2s;
    }
    #n {
      animation-delay: .4s;
    }
    #e {
      animation-delay: .6s;
    }
  }
}

@keyframes morphingLetters {
  0% {
    transform: scale(0);
  }
  20% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 572;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 572, 572;
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dasharray: 572, 572;
    stroke-dashoffset: -572;
  }
}

