// A spinner surrounding stationary content, inspired by LoadingScreenBtn.
.loading {
  --loading-size: 7rem;
  --loading-color: var(--md-sys-color-primary);
  --loading-background: var(--md-sys-color-surface-container, var(--md-sys-color-surface));
  --loading-thickness: 3px;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--loading-size);
  height: var(--loading-size);
  vertical-align: middle;
  border-radius: 50%;
  background: var(--loading-background);
  color: var(--loading-color);
  isolation: isolate;

  > .preloader-wrapper {
    position: absolute;
    inset: 5%;
    width: 90%;
    height: 90%;
    pointer-events: none;

    .spinner-layer { border-color: var(--loading-color); }
    .circle-clipper .circle { border-width: var(--loading-thickness); }
  }

  &:not(.active) > .preloader-wrapper {
    visibility: hidden;

    &, .spinner-layer, .circle-clipper .circle { animation: none; }
  }

  &.loading-small { --loading-size: 4rem; }
  &.loading-large { --loading-size: 10rem; }

  // A stylesheet display rule must never override the native hidden attribute.
  &[hidden] { display: none; }

  .loading-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72%;
    height: 72%;
    overflow: hidden;
    border-radius: inherit;

    img, svg {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .material-icons { font-size: calc(var(--loading-size) * 0.35); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading > .preloader-wrapper {
    &, .spinner-layer, .circle-clipper .circle { animation: none; }
  }
}