:root {
  --van-notify-text-color: var(--van-white);
  --van-notify-padding: var(--van-padding-xs) var(--van-padding-md);
  --van-notify-font-size: var(--van-font-size-md);
  --van-notify-line-height: var(--van-line-height-md);
  --van-notify-primary-background: var(--van-primary-color);
  --van-notify-success-background: var(--van-success-color);
  --van-notify-danger-background: var(--van-danger-color);
  --van-notify-warning-background: var(--van-warning-color);
}

.van-notify {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: var(--van-notify-padding);
  color: var(--van-notify-text-color);
  font-size: var(--van-notify-font-size);
  line-height: var(--van-notify-line-height);

  // allow newline character
  white-space: pre-wrap;
  text-align: center;
  word-wrap: break-word;

  &--primary {
    background: var(--van-notify-primary-background);
  }

  &--success {
    background: var(--van-notify-success-background);
  }

  &--danger {
    background: var(--van-notify-danger-background);
  }

  &--warning {
    background: var(--van-notify-warning-background);
  }
}