// copied and modified from bootstrap-sass v3.4.1

@import "variables";

.alert {
  position: relative;
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid silver;
  border-left-width: 12px;
  border-radius: $radius;
  > .alert-title {
    position: relative;
    margin: 0 0 20px;
    font-size: 22px;
    > svg {
      position: relative;
      top: 4px;
      margin-right: 7px;
      width: 24px;
      height: 24px;
    }
  }
  a {
    text-decoration: underline;
  }
  > div,
  > ul {
    margin-bottom: 0;
    &:first-letter {
      text-transform: uppercase;
    }
  }
}

// the following are shared b/w Alert and Badge components
.alert-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
  a {
    color: #3c763d;
  }
  > .alert-title > svg {
    fill: #3c763d;
  }
}
.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
  a {
    color: #31708f;
  }
  > .alert-title > svg {
    fill: #31708f;
  }
}
.alert-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
  a {
    color: #8a6d3b;
  }
  > .alert-title > svg {
    fill: #8a6d3b;
  }
}
.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
  a {
    color: #a94442;
  }
  > .alert-title > svg {
    fill: #a94442;
  }
}
