@use "../../../styles/int.scss";

.loading {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: var(--LoadingScreen-bg, white);
  color: var(--LoadingScreen-fg, #{int.$politico-red});
  z-index: 50;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  &.absolute {
    position: absolute;
  }
}

.progress {
  width: 40px;
  height: 40px;
  animation: circular-rotation 1.4s linear infinite;

  @include int.is-desktop() {
    width: 100px;
    height: 100px;
  }

  @keyframes circular-rotation {
    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes circular-dash {
    0% {
      stroke-dasharray: 1px,200px;
      stroke-dashoffset: 0;
    }

    50% {
      stroke-dasharray: 100px,200px;
      stroke-dashoffset: -15px;
    }

    100% {
      stroke-dasharray: 100px,200px;
      stroke-dashoffset: -125px;
    }
  }

  circle {
    animation: circular-dash 1.4s ease-in-out infinite;
    stroke-dasharray: 80px, 200px;
    stroke-dashoffset: 0px;
    stroke: currentColor;
  }
}