@import "../../../../scss/variables";

loading-indicator {
  position: absolute;
  width: $loading-indicator-width;
  height: $loading-indicator-height;
  user-select: none;

  &:empty {
    display: none;
  }

  // full screen overlay
  &.overlay {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 10;
    background-color: rgba(250, 250, 250, 0.7);

    .spinner {
      position: absolute;
      top: calc(50% - #{$loading-indicator-height / 2});
      left: calc(50% - #{$loading-indicator-width / 2});
    }
  }

  // overlay contained within some other element
  &.overlay-partial {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  &.center {
    top: calc(50% - #{$loading-indicator-height / 2});
    left: calc(50% - #{$loading-indicator-width / 2});
  }

  &.overlay-light {
    background-color: rgba(255, 255, 255, 0.9);
  }

  &.overlay-dark {
    background-color: rgba(0, 0, 0, 0.1);
  }

  &.overlay-transparent {
    background-color: transparent;
  }

  .spinner {
    width: $loading-indicator-width;
    height: $loading-indicator-height;
    color: $loading-indicator-color;

    > div {
      width: $loading-indicator-width / 4;
      height: $loading-indicator-width / 4;
      margin-top: -(($loading-indicator-width / 4) / 2);
      margin-left: -(($loading-indicator-width / 4) / 2);
    }
  }

  &.small {
    width: $loading-indicator-width / 2.8;
    height: $loading-indicator-height / 2.8;

    .spinner {
      width: $loading-indicator-width / 2.8;
      height: $loading-indicator-height / 2.8;

      > div {
        width: ($loading-indicator-width / 4) / 2.8;
        height: ($loading-indicator-width / 4) / 2.8;
        margin-top: (-(($loading-indicator-width / 4) / 2)) / 2.8;
        margin-left: (-(($loading-indicator-width / 4) / 2)) / 2.8;
      }
    }
  }

  @import "spinner";
}