@use "../../style/variables" as *;

.#{$prefix}-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity var(--ty-overlay-fade-duration);
  opacity: 0;

  &_default {
    background-color: var(--ty-overlay-bg-default);
  }

  &_blurred {
    backdrop-filter: blur(var(--ty-overlay-blur-radius));
  }

  &_inverted {
    background-color: var(--ty-overlay-bg-inverted);
  }

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

    &-enter-done {
      opacity: 1;
    }

    &-exit {
      opacity: 1;
    }

    &-exit-active {
      opacity: 0;
    }

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