.notification-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.notification {
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
  background-color: var(--light-color);
  border-bottom: 1px solid var(--medium-dark-color);
  will-change: opacity, transform;
}

.notification-positive {
  color: var(--positive-color);
  background-color: var(--positive-background-color);
}

.notification-negative {
  color: var(--negative-color);
  background-color: var(--negative-background-color);
}

.notification-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--vertical-rhythm) * 2);
}

.notification-content {
  flex: 1;
  display: flex;
  align-items: center;
  margin: calc(var(--vertical-rhythm) / 2) 0 calc(var(--vertical-rhythm) / 2 - 1px);
  min-width: 0;
}

.notification-enter,
.notification-exit {
  position: relative;
  z-index: -1;
}

.notification-enter.notification-enter-active,
.notification-exit.notification-exit-active {
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.notification-enter,
.notification-exit.notification-exit-active {
  transform: translateY(-100%);
  opacity: 0;
}

.notification-enter.notification-enter-active,
.notification-exit {
  transform: translateY(0);
  opacity: 1;
}

.instant-notification {
  display: inline-block;
  margin: var(--vertical-rhythm) auto;
  padding: calc(var(--vertical-rhythm) / 2) 1.5rem;
  color: var(--backdrop-color);
  background-color: var(--backdrop-background-color);
  border-radius: var(--vertical-rhythm);
}

.instant-notification-enter.instant-notification-enter-active,
.instant-notification-exit.instant-notification-exit-active {
  transition: opacity 0.2s ease-in-out,
              transform 0.2s ease-in-out;
}

.instant-notification-enter,
.instant-notification-exit.instant-notification-exit-active {
  opacity: 0;
  transform: scale(0.85);
}

.instant-notification-enter.instant-notification-enter-active,
.instant-notification-exit {
  opacity: 1;
  transform: scale(1);
}
