1.table {
2  position: relative;
3  z-index: $zindex-dropdown;
4
5  td {
6    border-top: 1px solid $gray-300;
7    border-bottom: 1px solid $gray-300;
8    &:first-of-type {
9      border-left: 1px solid $gray-300;
10    }
11    &:last-of-type {
12      border-right: 1px solid $gray-300;
13    }
14  }
15
16  // thead-light added for specificiy
17  .thead-light th {
18    border: none;
19    color: $dark;
20  }
21
22  .status-icon svg {
23    width: 1rem;
24    height: auto;
25  }
26
27  .b-table-has-details {
28    td {
29      border-bottom: none;
30    }
31    .table-row-expand svg {
32      transform: rotate(180deg);
33    }
34  }
35
36  .b-table-details {
37    background-color: $light;
38    td {
39      padding-left: calc(50px + (#{$table-cell-padding} * 2));
40    }
41    dl {
42      margin: 0;
43    }
44    dt {
45      display: inline-block;
46      margin-right: $spacer / 2;
47    }
48    dd {
49      display: inline-block;
50    }
51  }
52
53  .table-row-expand {
54    width: 50px;
55    .btn {
56      padding: 0;
57      width: 50px;
58    }
59    svg {
60      fill: $dark;
61    }
62  }
63}