/// Let theme define its own loading spinner.
$custom-loading-spinner: false !default;

/// Logo to display as loading spinner.
///
/// Possible values:
///
/// - `"default"`: Use images from default theme.
/// - `"custom"`: Use images from theme directory.
///
/// Custom logo image has to be named `loading_spinner/logo.png`.
$loading-spinner-logo: "default" !default;

/// Width of the loading spinner image.
$loading-spinner-logo-width: 130px !default;

/// Height of the loading spinner image.
$loading-spinner-logo-height: 112px !default;

/// Width of the loading spinner image for mobile.
$loading-spinner-logo-mobile-width: null !default;

/// Height of the loading spinner image for mobile.
$loading-spinner-logo-mobile-height: null !default;

/// Spinner background color.
$loading-spinner-background-color: #3b5159 !default;

/// What to display behind the logo:
///
/// - `"glow"`: Display radial gradient (default).
/// - `"custom"`: Display `loading_spinner/background.png` image.
/// - `"none"`: Nothing
$loading-spinner-background: "glow" !default;

/// Background size to apply to background image:
///
/// - `"auto"`: Do not apply background size (default).
/// - `"logo"`: Apply same size as for logo image. Allows using
///   background image as an animated layer of the logo.
$loading-spinner-background-size: "auto" !default;

/// Radial gradient color.
$loading-spinner-glow-color: rgba(117, 149, 160, 0.8) !default;

/// Apply opacity animation to glow or background image.
$loading-spinner-animate-background: true !default;

/// Size of the actual glowing area
$loading-spinner-glow-size: 140px !default;

/// File extension of background and logo
$loading-spinner-image-file-extension: "png" !default;

/// Background position for background image
$loading-spinner-background-position: 50% 50% !default;


@import "./loading_spinner/media";
@import "./loading_spinner/title";


@if not $custom-loading-spinner {
  .loading_spinner {
    // scss-lint:disable ImportantRule
    // Required to win against inline styles which ensure the loading
    // spinner already covers the page while css has not been loaded.
    background-color: $loading-spinner-background-color !important;
    // scss-lint:enable ImportantRule

    &:before {
      background-position: $loading-spinner-background-position;
      background-repeat: no-repeat;
      display: block;
      height: 100%;
      width: 100%;

      @if $loading-spinner-background == "glow" {
        content: "";
        @include radial-gradient(circle,
                                 $loading-spinner-glow-color 0%,
                                 $loading-spinner-background-color $loading-spinner-glow-size);
        background-size: 100% 100%;
      } @else if $loading-spinner-background == "custom" {
        content: "";
        background-image: image-url("pageflow/themes/#{$theme-name}/loading_spinner/background.#{$loading-spinner-image-file-extension}");

        @if $loading-spinner-background-size == "logo" {
          background-size: $loading-spinner-logo-width $loading-spinner-logo-height;
        }@else if $loading-spinner-background-size != "auto" {
          background-size: $loading-spinner-background-size;
        }

      }

      @if $loading-spinner-animate-background {
        opacity: 0;
        @include animation-name(loadingSpinnerGradientAnimation);
        @include animation-duration(5s);
        @include animation-iteration-count(infinite);
        @include animation-timing-function(ease-in);
      }
    }

    @include keyframes(loadingSpinnerGradientAnimation) {
      0% {
        opacity: 0.3;
      }

      50% {
        opacity: 1;
      }

      100% {
        opacity: 0.3;
      }
    }

    .loading_spinner_inner {
      left: 50%;
      top: 50%;
      width: $loading-spinner-logo-width;
      height: $loading-spinner-logo-height;
      margin-left: -$loading-spinner-logo-width / 2;
      margin-top: -$loading-spinner-logo-height / 2;
      position: absolute;

      @if ($loading-spinner-logo-mobile-height) {
        @include mobile {
          height: $loading-spinner-logo-mobile-height;
          margin-top: -$loading-spinner-logo-mobile-height / 2;
        }
      }

      @if ($loading-spinner-logo-mobile-width) {
        @include mobile {
          width: $loading-spinner-logo-mobile-width;
          margin-left: -$loading-spinner-logo-mobile-width / 2;
        }
      }


      div {
        width: 100%;
        height: 100%;
        background-size: $loading-spinner-logo-width $loading-spinner-logo-height;
        background-repeat: no-repeat;
        position: absolute;

        @if ($loading-spinner-logo-mobile-width) {
          @include mobile {
            background-size: $loading-spinner-logo-mobile-width $loading-spinner-logo-mobile-height;
          }  
        }
        
        @if $loading-spinner-logo == "custom" {
          background-image: image-url("pageflow/themes/#{$theme-name}/loading_spinner/logo.#{$loading-spinner-image-file-extension}");
        } @else {
          background-image: image-url("pageflow/themes/default/loading_spinner/logo.png");
        }
      }
    }
  }
}