.overlay {
  pointer-events: auto;
  isolation: isolate;
  position: fixed;
  z-index: 9;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  &.alert {
    z-index: 11;
  }

  &.job {
    animation: none;
    backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(1);
  }

  &.visible {
    animation: 0.24s ease-in fadeInFilter;
    animation-fill-mode: forwards;
    backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(0);
    background: rgba(0, 0, 0, 0.6);
  }

  @keyframes fadeInFilter {
    from {
      backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(0);
    }

    to {
      backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(1);
    }
  }
}