$loading: #{$prefix}-loading;
@mixin ne-loading {
  .#{$loading} {
    position: relative;

    .#{$loading}-shadow {
      opacity: 0;
    }

    &-show {
      .#{$loading}-container {
        filter: blur(0.8px);
      }
    }

    .#{$loading}-mask {
      display: flex;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 2;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: $white;
      opacity: 0;
      transition: opacity $animation-duration-base;
      &-enter-active,
      &-enter-done {
        opacity: 1;
      }
      &-exit-active {
        opacity: 0;
      }
      &-exit-done {
        display: none;
        opacity: 0;
      }
    }

    .#{$loading}-backdrop {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: $backdrop-bg;
    }

    .#{$loading}-text {
      z-index: 3;
      margin-top: 12px;
      font-size: map-get($font-sizes-map, large);
      font-weight: bold;
    }
    .#{$loading}-indicator {
      z-index: 3;
    }
  }
}