Loading: Fixed

@use "sass:math";

.c-loading {
  position: absolute;
  background-color: rgba(255, 255, 255, .9);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: $z-Index-loading;
}

.c-loading__el {
  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;

  p {
    font-weight: fw(bold);
    color: aviation(imbarchi);
  }

  .c-tablist--flights-list & {
    top: 10vh;
  }
}

.c-loading svg {

  $offset: 187;
  $duration: 1.4s;

  animation: rotator $duration linear infinite;

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

  .path {
    stroke-dasharray: $offset;
    stroke-dashoffset: 0;
    transform-origin: center;
    animation:
      dash $duration ease-in-out infinite, 
      colors ($duration) ease-in-out infinite;
  }

  @keyframes colors {
    0% { stroke: primary(night, 100); }
    25% { stroke: primary(sky, 120); }
    50% { stroke: primary(sky, 60); }
    75% { stroke: primary(sun, 80); }
    100% { stroke: primary(sun, 100); }
  }

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

}

/*------------------------------------*
    Position fixed modifier
*------------------------------------*/

.c-loading--fixed {
  position: fixed;
}

/*------------------------------------*
    Show/hide loading spinner 
*------------------------------------*/

.c-loading--show {
  display: block;
}

.c-loading--hide {
  display: none;
}