/**
 * Loading
 */
@import "helpers";

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

  // prefix project
  $project-prefix: map-get($info, 'variable-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($loading_class);