@import '../../style/variables';

.#{$prefix}overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 300ms;
  opacity: 0;

  &_default {
    background-color: rgba(0, 0, 0, 0.55);
  }

  &_blurred {
    backdrop-filter: blur(3px);
  }

  &_inverted {
    background-color: rgba(255, 255, 255, 0.75);
  }

  &_none {
  }

  &_fade {
    &-enter {
      opacity: 0;
    }

    &-enter-done {
      opacity: 1;
    }

    &-exit {
      opacity: 1;
    }

    &-exit-active {
      opacity: 0;
    }

    &-exit-done {
      opacity: 0;
      display: none;
    }
  }
}