/*
 * This file contains utility classes that can't be contained in a component and must be applied to the light DOM. None
 * of the rules in this stylesheet should target component tags or HTML tags, and all classes *must* start with ".zn-"
 * to reduce the possibility of collisions.
 */

@supports (scrollbar-gutter: stable) {
  .zn-scroll-lock {
    scrollbar-gutter: stable !important;
    overflow: hidden !important;
  }
}

@supports not (scrollbar-gutter: stable) {
  .zn-scroll-lock {
    padding-right: var(--zn-scroll-lock-size) !important;
    overflow: hidden !important;
  }
}

.zn-toast-stack {
  position: fixed;
  bottom: 0;
  inset-inline-end: 0;
  z-index: var(--zn-z-index-toast);
  width: 28rem;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
}

.zn-toast-stack zn-alert {
  margin: var(--zn-spacing-medium);
}

.zn-toast-stack zn-alert::part(base) {
  box-shadow: var(--zn-shadow-large);
}

@media screen and (min-width: 768px) {
  .zn-toast-stack zn-alert {
    margin: var(--zn-spacing-large);
  }
}