@use 'sass:map';

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

$spin: () !default;
$spin: map.merge(
  (
    z-index: value('z-index-masker'),
    mask-bg-color: value('bg-color-base'),
    mask-opacity: 40%,
    icon-color: value('color-primary-base'),
    tip-color: value('color-primary-base'),
    tip-font-size: value('font-size-secondary')
  ),
  $spin
);

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

  @include basis {
    position: relative;
  }

  &--inner,
  &__loading {
    position: absolute;
    inset: 0;
    z-index: value('spin-z-index');
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;

    & > * {
      pointer-events: auto;
    }
  }

  &__mask {
    position: absolute;
    inset: 0;
    background-color: value('spin-mask-bg-color');
    opacity: value('spin-mask-opacity');
  }

  &__icon {
    position: relative;
    color: value('spin-icon-color');
  }

  &__tip {
    position: relative;
    padding-top: 3px;
    font-size: value('spin-tip-font-size');
    color: value('spin-tip-color');
    user-select: none;
  }
}