.ds-notification {
  align-items: center;
  background-color: var(--ds-color-london-95);
  border-left: 0.125rem solid var(--ds-color-london-35);
  box-sizing: border-box;
  display: inline-flex;
  flex-wrap: wrap;
  font-family: var(--ds-type-system-sans-lining);
  font-size: var(--ds-type-scale-0);
  font-weight: 400;
  line-height: var(--ds-type-leading-lower);
  min-height: 1.875rem;
  opacity: 0;
  padding: 0.25rem 0.5rem;
  transition: opacity var(--ds-interactions-fade-in);
  width: 100%;
}

.ds-notification--active {
  opacity: 1;
  transition: opacity var(--ds-interactions-fade-in);
}

.ds-notification--error {
  background-color: var(--ds-color-tokyo-90);
  border-color: var(--ds-color-tokyo-55);
}

.ds-notification--success {
  background-color: var(--ds-color-chicago-90);
  border-color: var(--ds-color-chicago-55);
}

.ds-notification--warning {
  background-color: var(--ds-color-singapore-90);
  border-color: var(--ds-color-singapore-55);
}