// styling for the loading indicator that appears for page reloads and AJAX
// regions

// How far to offset the busy indicator from the center of the busy element.
$wc-common-busy-offset: $wc-common-busy-size / 2;

// These calculations allow us to accurately place the loading indicator in IE11
// Half of the width of the loading indicator
$wc-root-loading-width-offset: $wc-root-loading-padding + ($wc-root-loading-icon-size / 2);
@if ($wc-root-loading-width != -1 and $wc-root-loading-width != auto) {
  $wc-root-loading-width-offset: $wc-root-loading-padding + ($wc-root-loading-width / 2);
}

$wc-root-loading-height-offset: $wc-root-loading-padding + ($wc-root-loading-icon-size / 2);
@if ($wc-root-loading-height != -1 and $wc-root-loading-height != auto) {
  $wc-root-loading-height-offset: $wc-root-loading-padding + ($wc-root-loading-height / 2);
}

// loading indicator is generated and identified
// sass-lint:disable no-ids
#wc-ui-loading {
  // NOTE
  // If one wanted to center the loading indicator it would be much easier to
  // do it using a flex layout and optionally offsetting the inner div using
  // position relative.
  // eg: flex($justify: center, $align-items: center, $align-content: center);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: $wc-z-index-unloading-message;

  > div {
    display: inline-block;
    padding: $wc-root-loading-padding;
    @if ($wc-root-loading-width != -1) {
      width: $wc-root-loading-width;
    }

    @if ($wc-root-loading-height != -1) {
      height: $wc-root-loading-height;
    }

    // All of the following (and the mammoth calculation above) could be
    // removed if we did not have to support IE11. One could then offset
    // the div using position relative and offset with -ve ebing for
    // up/left. For example: position: relative; top: -5%; this cannot be
    // loaded in IE11 via JavaScript and be effective so we live with it.
    @if ($wc-root-loading-vertical-offset != 0 or $wc-root-loading-horizontal-offset != 0) {
      position: absolute;
    }

    @if ($wc-root-loading-vertical-offset != 0) {
      top: calc(#{$wc-root-loading-vertical-offset} - #{$wc-root-loading-height-offset});
    }

    @if  ($wc-root-loading-horizontal-offset != 0) {
      left: calc(#{$wc-root-loading-horizontal-offset} - #{$wc-root-loading-width-offset});
    }

    &::before {
      font-size: $wc-root-loading-icon-size;
    }
  }
}
// sass-lint:enable no-ids

// aria-busy areas
[aria-busy='true'] {
  position: relative; // to position the loading indicator.

  @if (($wc-common-busy-content-opacity >= 0) and ($wc-common-busy-content-opacity < 1)) {
    > * {
      @if ($wc-common-busy-content-usefade == 1) {
        transition-delay: 0s;
        transition-duration: $wc-common-busy-content-fadeduration;
        transition-property: opacity;
        transition-timing-function: ease-in-out;
      }
      @if ($wc-common-busy-content-opacity > 0 or $wc-common-busy-content-usefade == 1) {
        opacity: $wc-common-busy-content-opacity;
      } @else {
        visibility: hidden;
      }
    }
  }

  // yeah - I know this won't work for replaced content...
  &::before {
    // These are to restrict the spinning segment, otherwise all sorts of
    // fun may ensue.
    height: $wc-common-busy-size;
    left: calc(50% - #{$wc-common-busy-offset});
    position: absolute;
    top: calc(50% - #{$wc-common-busy-offset});
    width: $wc-common-busy-size;
  }
}

@if ($wc-common-busy-content-opacity >= 0 and $wc-common-busy-content-opacity < 1) {
  // sass-lint:disable no-qualifying-elements
  img[aria-busy='true'] {
    @if ($wc-common-busy-content-usefade == 1) {
      transition-delay: 0s;
      transition-duration: $wc-common-busy-content-fadeduration;
      transition-property: opacity;
      transition-timing-function: ease-in-out;
    }
    @if (($wc-common-busy-content-opacity > 0) or ($wc-common-busy-content-usefade == 1)) {
      opacity: $wc-common-busy-content-opacity;
    } @else {
      visibility: hidden;
    }
  }
  // sass-lint:enable no-qualifying-elements
}

@import 'wc.loading.color';
@import 'wc.loading.icons';
