@keyframes slide-in-bottom {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0%);
  }
}
@keyframes slide-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes slide-in-top {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}
:host {
  --wcs-alert-drawer-gap: var(--wcs-semantic-spacing-base);
  --wcs-alert-drawer-margin-horizontal: var(--wcs-semantic-spacing-base);
  --wcs-alert-drawer-margin-vertical: var(--wcs-semantic-spacing-base);
  --wcs-alert-drawer-min-width: 400px;
  --wcs-alert-drawer-hide-alert-animation-duration: var(--wcs-semantic-motion-duration-feedback-slow);
  position: fixed;
  z-index: 99999;
  width: fit-content;
}
:host wcs-alert {
  --wcs-alert-min-width: var(--wcs-alert-drawer-min-width);
}
:host wcs-alert:not([show]) {
  animation-duration: var(--wcs-alert-drawer-hide-alert-animation-duration);
  animation-timing-function: ease;
  animation-name: slide-out;
  animation-fill-mode: forwards;
}
@media (prefers-reduced-motion: reduce) {
  :host wcs-alert:not([show]) {
    animation: none;
  }
}
:host #alerts-container {
  display: flex;
  flex-direction: column;
  gap: var(--wcs-alert-drawer-gap);
}

@media (max-width: 575px) {
  :host {
    left: 50% !important;
    transform: translate(-50%, 0);
    width: calc(100% - 2 * var(--wcs-alert-drawer-margin-horizontal));
  }
  :host wcs-alert {
    --wcs-alert-min-width: 100%;
  }
}
:host([position=top]), :host([position=top-left]), :host([position=top-right]) {
  top: var(--wcs-alert-drawer-margin-vertical);
  flex-direction: column-reverse;
}
:host([position=top]) wcs-alert[show], :host([position=top-left]) wcs-alert[show], :host([position=top-right]) wcs-alert[show] {
  animation: slide-in-top var(--wcs-alert-drawer-hide-alert-animation-duration) ease;
}
@media (prefers-reduced-motion: reduce) {
  :host([position=top]) wcs-alert[show], :host([position=top-left]) wcs-alert[show], :host([position=top-right]) wcs-alert[show] {
    animation: none;
  }
}

:host([position=bottom]), :host([position=bottom-left]), :host([position=bottom-right]) {
  bottom: var(--wcs-alert-drawer-margin-vertical);
}
:host([position=bottom]) wcs-alert[show], :host([position=bottom-left]) wcs-alert[show], :host([position=bottom-right]) wcs-alert[show] {
  animation: slide-in-bottom var(--wcs-alert-drawer-hide-alert-animation-duration) ease;
}
@media (prefers-reduced-motion: reduce) {
  :host([position=bottom]) wcs-alert[show], :host([position=bottom-left]) wcs-alert[show], :host([position=bottom-right]) wcs-alert[show] {
    animation: none;
  }
}

:host([position=top-right]), :host([position=bottom-right]) {
  right: var(--wcs-alert-drawer-margin-horizontal);
}

:host([position=top-left]), :host([position=bottom-left]) {
  left: var(--wcs-alert-drawer-margin-horizontal);
}

:host([position=bottom]), :host([position=top]) {
  left: 50%;
  transform: translate(-50%, 0);
}