@import './var.less';

:root {
  --glm-notify-text-color: @notify-text-color;
  --glm-notify-padding: @notify-padding;
  --glm-notify-font-size: @notify-font-size;
  --glm-notify-line-height: @notify-line-height;
  --glm-notify-primary-background-color: @notify-primary-background-color;
  --glm-notify-success-background-color: @notify-success-background-color;
  --glm-notify-danger-background-color: @notify-danger-background-color;
  --glm-notify-warning-background-color: @notify-warning-background-color;
}

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

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

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

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

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

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