@use "ngx-toastr/toastr";

$z-index-base: 4500;
$z-index-toast-container: $z-index-base + 500;

@mixin overlay-backdrop {
  content: "";
  position: fixed;
  inset: 0;
  background-color: var(--ui-kit-color-black);
  opacity: 0.8;
  z-index: $z-index-toast-container;
}

.kit-overlay-container {
  position: fixed;
  inset: 0;
  z-index: $z-index-base;

  .toast-container:before {
    @include overlay-backdrop;
  }

  .kit-toastr {
    margin-top: 20px;
    box-shadow: none;
    z-index: $z-index-toast-container + 1;

    &:hover:not(.kit-toastr-dismissible) {
      cursor: default;
      box-shadow: none;
    }
  }
}