// Component ALERT BS5
$alert-info: 197, 65%, 47%;
$alert-warning: 27, 100%, 59%;
$alert-error: 352, 100%, 61%;
$alert-success: 93, 61%, 46%;

.alert-message {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.3rem;
  border: 1px solid lightgrey;
  background-color: $white;
  border-left-width: 0.5rem;
  border-radius: 0.5rem;

  > p {
    margin: 0;
  }

  > svg {
    flex-shrink: 0;
  }

  &-info {
    border-color: hsla(197, 65%, 47%, 30%);
    border-left-color: hsl(197, 65%, 47%);

    .icon-info {
      fill: hsl(197, 65%, 47%);
    }
  }

  &-warning {
    border-color: hsla(27, 100%, 59%, 30%);
    border-left-color: hsl(27, 100%, 59%);

    .icon-warning {
      fill: hsl(27, 100%, 59%);
    }
  }

  &-error {
    border-color: hsla(352, 100%, 61%, 30%);
    border-left-color: hsl(352, 100%, 61%);

    .icon-error {
      fill: hsl(352, 100%, 61%);
    }
  }

  &-success {
    border-color: hsla(93, 61%, 46%, 30%);
    border-left-color: hsl(93, 61%, 46%);

    .icon-success {
      fill: hsl(93, 61%, 46%);
    }
  }
}