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: flex-start;
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: theme-color("info");
49      background-color: theme-color-light("info");
50      fill: theme-color("info");
51    }
52
53    &.alert-success {
54      border-left-color: theme-color("success");
55      background-color: theme-color-light("success");
56      fill: theme-color("success");
57    }
58
59    &.alert-danger {
60      border-left-color: theme-color("danger");
61      background-color: theme-color-light("danger");
62      fill: theme-color("danger");
63    }
64
65    &.alert-warning {
66      border-left-color: theme-color("warning");
67      background-color: theme-color-light("warning");
68      fill: theme-color("warning");
69    }
70  }