.uik-loading {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  
  .uik-loading__text {
    font-size: 0.938rem;
    line-height: 1;
    color: var(--text);
    font-weight: 500;
    text-align: center;
    width: 100%;
    margin-top: 20px;
  }
  
  .uik-loading__spinner {
    width: 40px;
    height: 40px;
    position: relative;
    animation: uik-loading-spin 2.5s infinite linear both;
    
    @keyframes uik-loading-spin {
      to { transform: rotate(360deg); } 
    }

    .uik-loading__spinner-dot {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0; 
      animation: uik-loading-dot 2.0s infinite ease-in-out both;

      @keyframes uik-loading-dot {
        80%, to { transform: rotate(360deg); } 
      }

      &::before {
        content: '';
        display: block;
        width: 25%;
        height: 25%;
        background-color: var(--primary);
        border-radius: 100%;
        animation: uik-loading-dot-before 2.0s infinite ease-in-out both; 

        @keyframes uik-loading-dot-before {
          from, to {
            transform: scale(1.0); 
          }
          
          50% {
            transform: scale(0.4); 
          }
        }
      }

      @for $i from 1 through 6 {
        &:nth-child(#{$i}) {
          &,
          &::before {
            animation-delay: calc(-1.2s + #{$i} * 0.1s);
          }
        } 
      }
    }
  }

  &--white {
    .uik-loading__text {
      color: white;
    }

    .uik-loading__spinner {
      .uik-loading__spinner-dot {
        &::before {
          background-color: white;
        }
      }
    }
  }

  &--black {
    .uik-loading__spinner {
      .uik-loading__spinner-dot {
        &::before {
          background-color: var(--text);
        }
      }
    }
  }

  &--small {
    .uik-loading__text {
      font-size: 0.875rem;
    }
    
    .uik-loading__spinner {
      width: 22px;
      height: 22px;
    }
  }
}