@use 'sass:map';

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

$masker: () !default;
$masker: map.merge(
  (
    z-index: value('z-index-masker'),
    bg-color: value('color-black'),
    opacity: 45%
  ),
  $masker
);

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

  @include basis {
    z-index: value('masker-z-index');
  }

  @include fixed;
  @include inherit-color;

  &--inner {
    position: absolute;
    overflow: hidden;
  }

  &__mask {
    @include fixed {
      color: value('masker-bg-color');
      transform: translateZ(0);
    }

    &-inner {
      width: 100%;
      height: 100%;
      background-color: currentcolor;
      opacity: value('masker-opacity');
    }
  }

  &--inner &__mask {
    position: absolute;
  }

  &__placeholder {
    @include fixed {
      pointer-events: none;
      visibility: hidden;
    }
  }

  &__content {
    width: 0;
    height: 0;
  }

  &--disabled {
    pointer-events: none;

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