@import '../../../../style/variables';
.render-progress-model {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.2);
  .model {
    width: 400px;
    position: relative;
    top: 20%;
    left: 50%;
    margin-left: -200px;
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    box-shadow: 1px 0 20px rgba(0, 0, 0, 0.12);
    .model-header-container {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #c5c3c6;
      padding: 20px 20px 10px;
      align-items: center;
      .close {
        mat-icon {
          fill: #c5c3c6;
          color: #c5c3c6;
          cursor: pointer;
          transition: all 0.2s ease;
        }

        &:hover {
          mat-icon {
            fill: #46494c;
            color: #46494c;
          }
        }
      }
    }

    .model-content-container {
      display: flex;
      justify-content: center;
      padding: 20px;

      .progress-container {
        width: 100%;
        height: 25px;
        background-color: #e0e0e0;
        border-radius: 12px;
        overflow: hidden;
      }
      .progress-bar {
        position: relative;
        width: 100%;
        height: 18px;
        overflow: hidden;
        border-radius: 999px;
        background-color: #e5e7eb;
      }
      .progress-bar-text {
        position: absolute;
        inset: 0;
        color: $hd-color-font;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .progress-bar-fill {
        height: 100%;
        width: 0;
        //background-color: #da9803;
        background: linear-gradient(90deg, $hd-color-main, white);
        transition: width 0.3s ease;
      }
      .loading-dots {
        display: inline-flex;
        gap: 2px;
        margin-left: 4px;
      }
      .loading-dots span {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background-color: $hd-color-font;
        opacity: 0.25;
        animation: loading-dot 1.2s infinite ease-in-out;
      }
      .loading-dots span:nth-child(2) {
        animation-delay: 0.2s;
      }
      .loading-dots span:nth-child(3) {
        animation-delay: 0.4s;
      }
    }
  }
}

@keyframes loading-dot {
  0%,
  80%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }

  40% {
    opacity: 1;
    transform: translateY(-2px);
  }
}
