/**
 * Loading
 */
@use "helpers";
@use "sass:map";

@mixin print-loading-class($data) {
  $isEnabled: map.get($data, 'enable');
  $isWoocommerce: map.get($data, 'isWoocommerce');

  // prefix project — guard against null (map.get returns null when key is absent)
  // mirrors the same logic in _helpers.scss print-var-prop()
  $raw-prefix: map.get(helpers.$info, 'variable-prefix');
  $project-prefix: '';
  @if $raw-prefix and $raw-prefix != '' {
    $project-prefix: $raw-prefix + '-';
  }

  // $isEnabled: true => loading is used
  @if ($isEnabled) {
    // If $isWoocommerce value is false just load the loading selector only
    @if ($isWoocommerce == true) {
      .loading, .woocommerce .blockUI.blockOverlay, .woocommerce .loader {
        position: relative;
      }
      .woocommerce .blockUI.blockOverlay:before, .woocommerce .loader:before,
      .loading:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        background-color: rgba(255, 255, 255, 0.7);
      }
      .loading:after,
      body .xwc--pf-loader-overlay:after,
      .woocommerce .blockUI.blockOverlay:after,
      .woocommerce .loader:after {
        --loading-size: 35px;
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 3;
        width: var(--loading-size);
        height: var(--loading-size);
        margin: calc(-0.5 * var(--loading-size)) 0 0 calc(-0.5 * var(--loading-size));
        border-radius: 50%;
        border: 2px dashed transparent;
        border-bottom-color: var(--#{$project-prefix}color-primary);
        border-right-color: var(--#{$project-prefix}color-primary);
        animation: spinner .6s linear infinite;
        box-sizing: border-box;
      }
      @keyframes spinner {
        to {
          transform: rotate(360deg);
        }
      }
    } @else {
      .loading {
        position: relative;
      }
      .loading:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        background-color: rgba(255, 255, 255, 0.7);
      }
      .loading:after {
        --loading-size: 35px;
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 3;
        width: var(--loading-size);
        height: var(--loading-size);
        margin: calc(-0.5 * var(--loading-size)) 0 0 calc(-0.5 * var(--loading-size));
        border-radius: 50%;
        border: 2px dashed transparent;
        border-bottom-color: var(--#{$project-prefix}color-primary);
        border-right-color: var(--#{$project-prefix}color-primary);
        animation: spinner .6s linear infinite;
        box-sizing: border-box;
      }
      @keyframes spinner {
        to {
          transform: rotate(360deg);
        }
      }
    }
  }
}

@include print-loading-class(helpers.$loading_class);