/*
 * Network States
 */

.loading {
  animation: fade 0.5s linear infinite;
}

// slower animation speed for big objects
.carousel__img.loading {
  animation: fade 3s linear infinite;
}

main.loading {
  animation: shrink 0.5s linear 1;
  max-height: 0;
  overflow: hidden;
}

main.loaded {
  animation: expand 0.5s linear 1;
  max-height: fit-content;
}

.graphql-page {
  &.response-404 {
    cursor: not-allowed;
    filter: grayscale(1);
    opacity: 0.5;
  }
}

.is-offline {
  iframe {
    display: none;
  }

  .graphql-page {
    &.response-523 {
      cursor: not-allowed;
      filter: grayscale(1);
      opacity: 0.5;
    }
  }
}

body.ajax-loading {
  height: 100vh;
  overflow: hidden;

  #Header {
    position: relative;
    z-index: 2001;
  }
}