@keyframes Notification-appear {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.Notification {
  border-radius: var(--border-radius);
  position: relative;

  will-change: opacity, transform;
}

.Notification-content {
  padding: var(--space-2x) 44px var(--space-2x) var(--space-2x);
}

.Notification--docktop {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.Notification--dockbottom {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.Notification--entering {
  animation-name: Notification-appear;
  animation-duration: var(--velocity);
  animation-timing-function: cubic-bezier(0.425, 1.65, 0, 0.845);
}
.Notification--closing {
  opacity: 0;

  transform: scale(1.02);
  transition: var(--velocity) opacity, var(--velocity) transform;
  transition-timing-function: cubic-bezier(0.225, -0.26, 0, 1.355);
}

.Notification--success {
  background-color: var(--color-green-600);
  color: var(--color-white);
}

.Notification--error {
  background-color: var(--color-red-600);
  color: var(--color-white);
}

.Notification--notice {
  background-color: var(--color-light-yellow);
  color: var(--color-neutral-800);
}

.Notification--neutral {
  background-color: var(--color-brand-200);
  color: var(--color-neutral-800);
}