styles.css

:root {
  --ztc-bg-error: #ff4a2e;
  --ztc-bg-success: #94ffd8;
  --ztc-bg-info: #fff;
  --ztc-bg-warning: #ffea2e;
  --ztc-bg-dark: #000;
}

.ztc-container {
  bottom: 16px;
  left: 16px;
  position: fixed;
  right: 16px;
  z-index: 999999;
}

@media (min-width: 46em) {
  .ztc-container {
    left: unset;
    width: 328px;
  }
}

.ztc-notification {
  align-items: center;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 5px 10px 0px;
  color: #000;
  display: flex;
  height: 64px;
  padding: 0 24px;
  user-select: none;
}

.ztc-message {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ztc-notification.error {
  background-color: var(--ztc-bg-error);
}

.ztc-notification.success {
  background-color: var(--ztc-bg-success);
}

.ztc-notification.info {
  background-color: var(--ztc-bg-info);
}

.ztc-notification.warning {
  background-color: var(--ztc-bg-warning);
}

.ztc-notification.dark {
  border-color: var(--ztc-bg-dark);
  border-style: solid;
  border-width: 1px;
}

.ztc-notification.info.dark {
  background-color: var(--ztc-bg-dark);
  border-color: #858585;
  color: #fff;
}