@import "../../variables";
@import "../../animations";

.cxe-loadingindicator-shadow{
   position: fixed;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
}

.cxb-loadingindicator-overlay{
    position: absolute;
    top: 2px;
    left: 50%;
    background-color: $base-back-color;
    padding: .3rem 1rem;
    width: max-content;

    border-radius: 8px;
    border: 1px solid $base-border-color;
    font-weight: bold;
    font-size: 1rem;

  .cxe-dot {
      border-radius: 50%;
      height: .3rem;
      width: .3rem;
      background-color: $base-font-color;
      border: 0;
      margin-left: .2rem;

      animation-name: blink;
      animation-duration: 1.4s;
      animation-iteration-count: infinite;
      animation-fill-mode: both;
   }

  .cxe-dot:nth-child(2) {
      animation-delay: .2s;
  }

  .cxe-dot:nth-child(3) {
      animation-delay: .4s;
   }
}
.cxb-loading-indicator {
   padding: 20px;
   color: gray;
   position: relative;

   .cxe-loading-indicator-slider {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      height: 2px;

      & > div {
         background: rgba(0, 100, 255, 0.29);
         width: 0;
         height: 2px;
      }
   }

   &.cxs-loading .cxe-loading-indicator-slider > div {
      width: 100%;
      transition: width 2s ease;
   }

   &.cxs-absolute {
      padding: 0;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      height: 2px;
   }
}