.notifications-wrapper {
  position: fixed;
  top: var(--space-md);
  left: var(--space-md);
  z-index: var(--z-notifications-wrapper);
  max-width: calc(100vw - 2*var(--space-md));
}

.notification {
  padding: var(--space-sm);
  font-size: var(--font-size-sm);
  backdrop-filter: var(--backdrop-blur-container);
  border-width: 2px;
  border-style: solid;
  border-radius: var(--border-radius-container);
  transition: 
    transform       var(--transition-duration),
    height          var(--transition-duration),
    margin-bottom   var(--transition-duration),
    padding         var(--transition-duration);
  width: auto;
  min-width: calc( 320px - 2*var(--space-md) );
  max-width: 100%;
  height: auto;
  margin-bottom: var(--space-md);
}

.notification.hidden-on-left {
  transform: translateX( calc( -100% - var(--space-md) - 16px ) );
}

.notification.hidden-height {
  height: 0;
  margin-bottom: 0;
  padding: 0 var(--space-sm);
}

.notification__info {
  color: var(--color-primary);
  background-color: var(--color-background);
  border: 2px solid var(--color-primary);
  box-shadow: 0px 0px 8px 2px var(--color-primary);
}

.notification__warning {
  color: var(--color-text);
  background-color: rgba(255, 179, 0, 0.6);
  border: 2px solid  #ffd54f;
  box-shadow: 0px 0px 8px 2px #ffb300; 
}

.notification__error {
  color: var(--color-text);
  background-color: rgba(255, 89, 0, 0.6);
  border: 2px solid  #f44336;
  box-shadow: 0px 0px 8px 2px #ff5900;
}