@use "../util";
@use "alertify/alertify-core";
@use "alertify/alertify-default";
@use "../base/colors";
@use "../base/lengths";

/**
 * Alertify styles.
 */

article.alertify-log-warn {
  background-color: colors.$dark-orange;
  code.src {
    color: colors.$darkest-orange;
  }
}

article.alertify-log code.src {
  display: block;
  color: colors.$dark-red;
  font-size: 70%;
}

.alertify-log-error {
  background-color: colors.$alert-red;
}

#notifications {
  display: none;
}

// TODO:
//   This differs from alertify messages and should be united
div.notify {
  position: relative;
  margin: .5em auto;
  display: block;
  padding: .5em;
  
  border-radius: lengths.$standard-border-radius;
  max-width: 30em;
  background-color: colors.$alert-red;
  color: colors.$nearly-white;
  &.notify-success {
    background-color: colors.$ids-green-1
  }
  &.notify-warn {
    background-color: colors.$ids-orange-2
  }
}