@use 'ej2-base/styles/common/mixin' as *;

@include export-module('spinner-layout') {
  .e-spinner-pane {
    align-items: center;
    display: inline-flex;
    height: $spinner-full-height;
    justify-content: center;
    left: $spinner-zero-space;
    position: absolute;
    text-align: center;
    top: $spinner-zero-space;
    user-select: none;
    vertical-align: middle;
    width: $spinner-full-width;
    z-index: 1000;

    &::after {
      content: $theme;
      display: none;
    }

    &.e-spin-left {
      /* stylelint-disable property-no-vendor-prefix */
      .e-spinner-inner {
        -webkit-transform: translateX(0%) translateY(-50%);
        left: $spinner-zero-space;
        padding-left: $spin-padding;
        transform: translateX(0%) translateY(-50%);
      }
    }

    &.e-spin-right {
      .e-spinner-inner {
        -webkit-transform: translateX(-100%) translateY(-50%);
        left: $spinner-full-width;
        padding-right: $spin-padding;
        transform: translateX(-100%) translateY(-50%);
      }
    }

    &.e-spin-center {
      .e-spinner-inner {
        -webkit-transform: translateX(-50%) translateY(-50%);
        left: $spinner-half-width;
        transform: translateX(-50%) translateY(-50%);
      }
    }

    &.e-spin-hide {
      display: none;
    }

    &.e-spin-show {
      display: inline-flex;
    }

    .e-spinner-inner {
      -webkit-transform: translateX(-50%) translateY(-50%);
      left: $spinner-half-width;
      margin: $spinner-zero-space;
      position: absolute;
      text-align: center;
      top: $spinner-half-width;
      transform: translateX(-50%) translateY(-50%);
      z-index: 1000;

      .e-spin-label {
        font-family: $spin-label-font-family;
        font-size: $spin-label-font-size;
        margin-top: $spin-label-margin-top;
        text-align: center;
      }

      .e-spin-material,
      .e-spin-material3,
      .e-spin-tailwind3 {
        @include mat-spinner-rotate;
        display: block;
        margin: $spin-tail-margin;

        .e-path-circle {
          fill: none;
          stroke-linecap: square;
        }
      }

      .e-spin-bootstrap4 {
        @include boot4-spinner-rotate;
        border-radius: $spin-bootstrap-border-radius;
        display: block;
        margin: $spin-tail-margin;

        .e-path-circle {
          fill: none;
          stroke-linecap: square;
          stroke-width: $spin-boot4-stroke-width;
        }
      }

      .e-spin-fluent,
      .e-spin-fluent2,
      .e-spin-fabric {
        @include fb-spinner-rotate;
        display: block;
        margin: $spin-tail-margin;
        overflow: visible;

        .e-path-arc,
        .e-path-circle {
          fill: none;
          stroke-width: $spin-fabric-stroke-width;
        }
      }

      .e-spin-tailwind {
        @include tw-spinner-rotate;
        display: block;
        margin: $spin-tail-margin;
        overflow: visible;

        .e-path-arc,
        .e-path-circle {
          fill: none;
          stroke-width: $spin-tailwind-stroke-width;
        }
      }

      .e-spin-bootstrap5,
      .e-spin-bootstrap5v3 {
        @include boot5-spinner-rotate;
        border-radius: $spin-bootstrap-border-radius;
        display: block;
        margin: $spin-tail-margin;

        .e-path-circle {
          fill: none;
          stroke-linecap: square;
          stroke-width: $spin-boot5-stroke-width;
        }
      }

      .e-spin-bootstrap {
        display: block;
        margin: $spin-tail-margin;
      }

      .e-spin-high-contrast {
        @include fb-spinner-rotate;
        display: block;
        margin: $spin-tail-margin;
        overflow: visible;

        .e-path-arc,
        .e-path-circle {
          fill: none;
          stroke-width: $spin-fabric-stroke-width;
        }
      }
    }
  }
}