@import (reference) "./../styles/variables/zindex.less";
@import (reference) "./../styles/less/mixins/_logical-properties.less";

// Disables the scroll on the body
// Note: might not work in some iOS Safari browsers
// (see https://bugs.webkit.org/show_bug.cgi?id=153852 & https://bugs.webkit.org/show_bug.cgi?id=220908)
.no-scroll {
  overflow: hidden;
}

.dimmer {
  &--scrollable {
    overflow-y: auto;
  }

  position: fixed;
  z-index: @zindex-modal;
  top: 0;
  .right(0);

  bottom: 0;
  .left(0);

  width: 100vw;
  height: 100vh;
  height: 100dvh;
  transition: background-color cubic-bezier(0, 0.94, 0.62, 1) 350ms;

  &.dimmer--enter-done {
    background: rgba(0, 0, 0, 0.4);

    .np-theme-personal & {
      background-color: rgba(14, 15, 12, 0.4);
    }

    .np-theme-personal--dark & {
      background-color: rgba(243, 245, 241, 0.25);
    }

    .np-theme-personal--forest-green &,
    .np-theme-personal--bright-green & {
      background-color: rgba(255, 255, 255, 0.25);
    }

    &.dimmer--transparent {
      background: transparent;
    }

    &.dimmer--enter-fade {
      > * {
        opacity: 1;
      }
    }
  }

  // Fades the content along the modal and prevents content to disappear with a jump when the
  // component is unmounted
  &.dimmer--exit-fade,
  &.dimmer--enter-fade {
    > * {
      transition: opacity cubic-bezier(0, 0.94, 0.62, 1) 350ms;
    }
  }

  &.dimmer--exit-fade {
    > * {
      opacity: 1;
    }
  }

  &.dimmer--enter-fade {
    > * {
      opacity: 0;
    }
  }

  &.dimmer--exit {
    &.dimmer--exit-fade {
      > * {
        opacity: 0;
      }
    }
  }
}

.dimmer-content-positioner {
  min-height: 100%;

  :not(.dimmer--scrollable) > & {
    height: 100%;
  }

  pointer-events: none;

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