projects/ngclient/src/app/restore-flow/restore-progress/restore-progress.component.scss
@use '@ship-ui/core/styles/helpers' as *;

:host {
  display: block;
  padding: p2r(0 20);
  margin-top: 32px;
}

section {
  display: grid;
  gap: p2r(20);
  grid-template-columns: 2fr 1fr;
  grid-template-areas:
    'progress notifications'
    'logs logs';

  h3 {
    margin-bottom: p2r(16);
  }

  .progress {
    grid-area: progress;

    &:has(.complete-check) {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: p2r(20);
    }

    h3 {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    sh-spinner {
      --spinner-size: #{p2r(20)};
      --spinner-thickness: #{p2r(3)};
    }
  }

  .notifications {
    grid-area: notifications;
  }

  .logs {
    grid-area: logs;

    app-logs-live {
      max-height: p2r(800);
      overflow: auto;
    }
  }
}

.notification-list {
  max-height: p2r(240);
  overflow: auto;
}

.complete-success {
  position: relative;
  width: p2r(100);
  height: p2r(100);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--success-8);

  sh-icon {
    font-size: p2r(40);
    opacity: 0;
    animation: reveal-icon 200ms linear forwards;
    animation-delay: 1s;
  }

  .border-circle {
    fill: none;
    stroke: var(--success-8);
  }
}

.complete-failure {
  position: relative;
  width: p2r(100);
  height: p2r(100);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--error-8);

  sh-icon {
    font-size: p2r(40);
    opacity: 0;
    animation: reveal-icon 200ms linear forwards;
    animation-delay: 1s;
  }

  .border-circle {
    fill: none;
    stroke: var(--error-8);
  }
}

.border-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.border-circle {
  fill: none;
  stroke-width: p2r(5);
  stroke-dasharray: 282.74;
  stroke-dashoffset: 282.74;
  animation: draw-border 1.2s linear forwards;
}

@keyframes draw-border {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes reveal-icon {
  to {
    opacity: 1;
  }
}

.progress-content {
  display: flex;
  flex-direction: column;
  gap: p2r(4);

  sh-progress-bar {
    margin-bottom: p2r(12);
  }

  p {
    span {
      margin-right: p2r(4);
    }
  }
}
