@use '@mezzanine-ui/system/palette';
@use './backdrop' as *;

$variant-colors: (
  dark: palette.semantic-variable(overlay, strong),
  light: palette.semantic-variable(surface, solid),
);

.#{$prefix} {
  width: 100%;
  height: 100%;
  pointer-events: none;
  position: relative;

  &--open {
    pointer-events: auto;
  }

  &--absolute {
    position: absolute;
    inset: 0;
  }

  &__main {
    width: 100%;
    height: 100%;
    position: relative;
  }

  &__backdrop {
    position: absolute;
    inset: 0;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;

    @each $variant, $color in $variant-colors {
      &--#{$variant} {
        background-color: $color;
      }
    }
  }

  &__content {
    width: 100%;
    height: 100%;
    position: relative;
    pointer-events: none;

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