@use 'sass:map';

@use './shared' as *;
@use './design' as *;

$loading: () !default;
$loading: map.merge(
  (
    z-index: value('z-index-popup'),
    filler-bg-color: value('color-primary-base')
  ),
  $loading
);

.#{$namespace}-loading {
  &-vars {
    @include define-preset-values('loading', $loading);
  }

  @include basis {
    position: fixed;
    inset-inline-start: 0;
    z-index: value('loading-z-index');
    width: 100%;
  }

  &__filler {
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: value('loading-filler-bg-color');
    transition: value('transition-background'), value('transition-transform');
    will-change: transform;
  }

  $types: success error warning;

  @each $type in $types {
    &--#{$type} &__filler {
      @include define-css-var('loading-filler-bg-color', value('color' $type 'base'));
    }
  }
}