1 files changed, 84 insertions, 0 deletions

diff --git a/src/components/Details/Details.module.scss b/src/components/Details/Details.module.scss
new file mode 100644
index 0000000..32197f0
--- /dev/null
+++ b/src/components/Details/Details.module.scss
@@ -0,0 +1,84 @@
+.details {
+  height: 100%;
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: stretch;
+  overflow: hidden;
+}
+
+.header {
+  flex-shrink: 0;
+  flex-grow: 0;
+}
+
+.content {
+  flex-grow: 1;
+  flex-shrink: 1;
+  overflow-y: auto;
+}
+
+.summary {
+  font-size: 2em;
+}
+
+.tabs {
+  display: flex;
+  border-bottom: 1px solid black;
+
+  &:last-child {
+    flex-grow: 1;
+  }
+}
+
+.tab {
+  background-color: white;
+  border: none;
+  border-top: 1px solid black;
+  border-right: 1px solid black;
+  border-radius: 0;
+  color: black;
+  font-size: 1.2em;
+  padding: 0.5em;
+
+  &.selected {
+    background-color: black;
+    color: white;
+  }
+}
+
+.emptySpace {
+  flex-grow: 1;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  font-size: 1.2em;
+  padding: 0.5em;
+}
+
+.resend {
+  margin-left: 1em;
+}
+
+.headers {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  border: 1px solid black;
+  margin: 1em;
+  overflow-x: auto;
+
+  h2 {
+    grid-column: 1/ span 2;
+    background-color: black;
+    color: white;
+    padding: 0.5em;
+  }
+
+  > div {
+    line-break: auto;
+    padding: 0.5em;
+
+    &:nth-of-type(4n), &:nth-of-type(4n - 1) {
+      background-color: lightgray;
+    }
+  }
+}