@import '@angular/material/theming';
@import '../../theme/palette';
@import '../../theme/default-variables';

/* stylelint-disable selector-max-id */
#td-pre-loader {
  display: flex;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 10000;
  height: 100%; // for transition
  transition: opacity 0.125s 0s ease-in-out, height 0s 0.125s ease-in-out;

  /* light-theme */
  background-color: map-get($mat-light-theme-background, background);

  /* LOGO */
  .teradata-logo {
    overflow: visible;
    width: 300px;
    max-width: 95%;
  }

  .teradata-logo .teradata-logo-letters path {
    /* light-theme */
    stroke: #354145;
    fill: #354145;
  }

  /* SPINNER */
  .mat-spinner {
    margin-top: 1em;
  }

  .mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode='indeterminate'] {
    animation: mat-progress-spinner-linear-rotate 2s linear infinite;
  }

  .mat-progress-spinner {
    display: block;
    position: relative;
    width: 36px;
    height: 36px;
  }

  .mat-progress-spinner svg {
    position: absolute;
    transform: rotate(-90deg);
    top: 0;
    left: 0;
    transform-origin: center;
    overflow: visible;

    circle {
      animation-name: mat-progress-spinner-stroke-rotate-100;
      stroke-dasharray: 282.743px;
      stroke-width: 10%;
    }
  }

  .mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode='indeterminate'] circle {
    transition-property: stroke;
    animation-duration: 4s;
    animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
    animation-iteration-count: infinite;
  }
  .mat-progress-spinner circle {
    fill: transparent;
    transform-origin: center;
    transition: stroke-dashoffset 225ms linear;
    transition-property: stroke-dashoffset;
  }

  /* light-theme */
  .mat-progress-spinner circle,
  .mat-spinner circle {
    stroke: map-get($td-accent, default);
  }

  @keyframes mat-progress-spinner-linear-rotate {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes mat-progress-spinner-stroke-rotate-100 {
    0% {
      stroke-dashoffset: 268.60617px;
      transform: rotate(0);
    }
    12.5% {
      stroke-dashoffset: 56.54867px;
      transform: rotate(0);
    }
    12.5001% {
      stroke-dashoffset: 56.54867px;
      transform: rotateX(180deg) rotate(72.5deg);
    }
    25% {
      stroke-dashoffset: 268.60617px;
      transform: rotateX(180deg) rotate(72.5deg);
    }
    25.0001% {
      stroke-dashoffset: 268.60617px;
      transform: rotate(270deg);
    }
    37.5% {
      stroke-dashoffset: 56.54867px;
      transform: rotate(270deg);
    }
    37.5001% {
      stroke-dashoffset: 56.54867px;
      transform: rotateX(180deg) rotate(161.5deg);
    }
    50% {
      stroke-dashoffset: 268.60617px;
      transform: rotateX(180deg) rotate(161.5deg);
    }
    50.0001% {
      stroke-dashoffset: 268.60617px;
      transform: rotate(180deg);
    }
    62.5% {
      stroke-dashoffset: 56.54867px;
      transform: rotate(180deg);
    }
    62.5001% {
      stroke-dashoffset: 56.54867px;
      transform: rotateX(180deg) rotate(251.5deg);
    }
    75% {
      stroke-dashoffset: 268.60617px;
      transform: rotateX(180deg) rotate(251.5deg);
    }
    75.0001% {
      stroke-dashoffset: 268.60617px;
      transform: rotate(90deg);
    }
    87.5% {
      stroke-dashoffset: 56.54867px;
      transform: rotate(90deg);
    }
    87.5001% {
      stroke-dashoffset: 56.54867px;
      transform: rotateX(180deg) rotate(341.5deg);
    }
    100% {
      stroke-dashoffset: 268.60617px;
      transform: rotateX(180deg) rotate(341.5deg);
    }
  }
}

.dark-theme #td-pre-loader {
  /* dark-theme */
  background-color: map-get($mat-dark-theme-background, background);

  /* dark-theme */
  .mat-progress-spinner circle,
  .mat-spinner circle {
    stroke: map-get($td-dark-accent, default);
  }

  /* dark-theme */
  .teradata-logo .teradata-logo-letters path {
    stroke: white;
    fill: white;
  }
}