@import "./properties.css";

.alert * {
  box-sizing: border-box;
  margin: var(--alert-margin);
}

.alert {
  align-items: center;
  background-color: transparent;
  border-radius: var(--alert-border-radius);
  box-sizing: border-box;
  display: flex;
  font-family: var(--alert-font-family);
  font-size: var(--alert-font-size);
  font-weight: bold;
  padding: var(--alert-padding);
  width: 100%;
}

.content {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-right: var(--alert-content-margin-right);
}

.icon {
  align-items: center;
  border-radius: var(--alert-icon-border-radius);
  display: flex;
  font-size: var(--alert-icon-size);
  height: var(--alert-icon-height);
  justify-content: center;
  padding-right: var(--alert-icon-padding-right);
}

.warning {
  background-color: var(--alert-warning-background-color);
  color: var(--alert-warning-color);
}

.info {
  background-color: var(--alert-info-background-color);
  color: var(--alert-info-color);
}

.error {
  background-color: var(--alert-error-background-color);
  color: var(--alert-error-color);
}

.success {
  background-color: var(--alert-success-background-color);
  color: var(--alert-success-color);
}