.alert {
  border: transparent 1px solid;
  border-radius: 8px;
  width: 70%;
  padding: var(--sp-075);
  font-size: 1.2rem;
}

.alert-success {
  background: var(--green-2);
  color: var(--black-1);
}

.alert-warning {
  background: var(--orange-2);
  color: var(--black-1);
}

.alert-error {
  background: var(--red-2);
  color: var(--black-1);
}

.alert-info {
  background: var(--blue-2);
  color: var(--black-1);
}

.alert-icon {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

.alert-icon .icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: var(--sp-05);
}

.alert-dismiss {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
  position: relative;
}

.alert-dismiss .close {
  width: 1rem;
  height: 1rem;
  position: absolute;
  right: var(--sp-1);
  cursor: pointer;
}

/* color variants */
/* dark */

.alert-success.alert-dark {
  background: var(--green-1);
  color: var(--green-6);
}

.alert-warning.alert-dark {
  background: var(--orange-1);
  color: var(--orange-6);
}

.alert-error.alert-dark {
  background: var(--red-1);
  color: var(--red-6);
}

.alert-info.alert-dark {
  background: var(--blue-1);
  color: var(--blue-6);
}

/* color variants */
/* light */

.alert-success.alert-light {
  background: var(--green-4);
  color: var(--black-1);
}

.alert-warning.alert-light {
  background: var(--orange-4);
  color: var(--black-1);
}

.alert-error.alert-light {
  background: var(--red-4);
  color: var(--black-1);
}

.alert-info.alert-light {
  background: var(--blue-4);
  color: var(---black-1);
}