.alert {
  display: flex;
  align-items: center;
  border-left: 0.25rem solid var(--#{$prefix}alert-color);

  > :last-child {
    margin-bottom: 0;
  }
}

.alert-link {
  &,
  &:hover {
    color: var(--#{$prefix}alert-color);
  }
}

.alert-heading {
  font-weight: bold;
}

@each $name, $color in $theme-colors {
  .alert-#{$name} {
    border-left-color: $color;
  }
}

.alert-icon {
  flex-shrink: 0;
  margin-right: 0.5rem;
  width: 30px;

  svg {
    width: 100%;
  }

  i {
    width: 100%;
  }
}

.alert-message {
  width: 100%;
}
