1.alert {
2    display: flex;
3    padding: $spacer;
4    border-width: 0 0 0 3px;
5    color: $gray-800;
6    margin-bottom: $spacer;
7
8    &.small {
9      padding: $spacer / 2;
10      font-size: 1rem;
11    }
12
13    .close {
14      font-weight: 300;
15      opacity: 1;
16    }
17
18    .alert-icon {
19      display: inline-flex;
20      align-items: center;
21      margin-right: $spacer;
22      margin-bottom: $spacer;
23
24      @include media-breakpoint-up(sm) {
25        margin-bottom: 0;
26      }
27    }
28
29    .alert-content {
30      flex: 1 1 auto;
31    }
32
33    .alert-title {
34      margin-bottom: $spacer / 2;
35    }
36
37    .alert-msg {
38      p + p {
39        margin-bottom: $spacer;
40      }
41
42      p:last-of-type {
43        margin-bottom: 0;
44      }
45    }
46
47    &.alert-info {
48      border-left-color: $info;
49      background-color: $info-light;
50      fill: $info;
51    }
52
53    &.alert-danger {
54      border-left-color: $danger;
55      background-color: $danger-light;
56      fill: $danger;
57    }
58
59    &.alert-warning {
60      border-left-color: $warning;
61      background-color: $warning-light;
62      fill: $warning;
63    }
64  }