.alert {
  border-width: var(--size-border-xs);
  border-style: solid;
  box-shadow: var(--size-box-shadow-0);

  .close-icon {
    > button {
      border: 0;
      background: none;
      cursor: pointer;
      padding: 0;
      color: inherit;
      font: inherit;
    }
  }
}

.alert__default {
  color: var(--color-text-body-primary);
  background: var(--color-background-default);
  border-color: var(--color-border-default);
}

.alert__info {
  color: var(--color-text-body-primary);
  background: var(--color-background-info);
  border-color: var(--color-border-info);
}

.alert__success {
  color: var(--color-text-body-primary);
  background: var(--color-background-success);
  border-color: var(--color-border-success);
}

.alert__warning {
  color: var(--color-text-body-primary);
  background: var(--color-background-warning);
  border-color: var(--color-border-warning);
}

.alert__danger {
  color: var(--color-text-body-primary);
  background: var(--color-background-danger);
  border-color: var(--color-border-danger);
}

.alert__icon__default { color: var(--color-text-alert-icon-default); }
.alert__icon__info { color: var(--color-text-alert-icon-info); }
.alert__icon__success { color: var(--color-text-alert-icon-success); }
.alert__icon__warning { color: var(--color-text-alert-icon-warning); }
.alert__icon__danger { color: var(--color-text-alert-icon-danger); }
