spend table styles

styles/sections/_reports.scss

@@ -6,13 +6,20 @@
   }
 
   .funding-summary-row__col {
-    @include grid-pad;
 
     @include media($medium-screen) {
+      @include grid-pad;
       flex-grow: 1;
       display: flex;
       flex-direction: row;
       flex-basis: 50%;
+
+      &:first-child {
+        padding-left: 0;
+      }
+      &:last-child {
+        padding-right: 0;
+      }
     }
 
     align-items: stretch;
@@ -171,3 +178,102 @@
     }
   }
 }
+
+
+.spend-table {
+  .spend-table__header {
+    @include panel-base;
+    @include panel-theme-default;
+    border-bottom: 0;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    padding: $gap * 2;
+
+    .spend-table__title {
+      @include h3;
+      margin: 0;
+      flex: 2;
+    }
+
+    .spend-table__month-select {
+      margin: 0;
+      flex: 1;
+    }
+  }
+
+  table {
+    th, td {
+      white-space: nowrap;
+
+      button {
+        margin: 0;
+      }
+
+      &.current-month {
+        background-color: $color-aqua-lightest;
+      }
+
+      &.previous-month {
+        opacity: 0.65;
+      }
+
+      &.meter-cell {
+        padding-left: 0;
+
+        @include media($medium-screen) {
+          min-width: 12rem;
+        }
+
+        meter {
+          width: 100%;
+          height: 3rem;
+          background: $color-white;
+          position: relative;
+          display: none;
+
+          @include media($medium-screen) {
+            display: block;
+          }
+
+          &::-webkit-meter-bar {
+            background: $color-white;
+          }
+
+          &::before {
+            content: attr(title);
+            position: absolute;
+            top: .5rem;
+            left: $gap;
+            @include h5;
+            color: $color-white;
+          }
+        }
+      }
+    }
+
+    .spend-table__workspace {
+      th, td {
+        font-weight: bold;
+      }
+    }
+
+    .spend-table__project {
+      .spend-table__project__toggler {
+        @include icon-link-color($color-black-light, $color-gray-lightest);
+        margin-left: -$gap;
+
+        .icon {
+          @include icon-size(12);
+          margin-right: $gap;
+        }
+      }
+
+      .spend-table__project__env {
+        margin-left: $gap;
+      }
+    }
+  }
+}