3 files changed, 112 insertions, 36 deletions

diff --git a/src/objects/_table.scss b/src/objects/_table.scss
index 9f414b8..ebfa49a 100644
--- a/src/objects/_table.scss
+++ b/src/objects/_table.scss
@@ -44,47 +44,12 @@
             border-width:     1px 0 0;
             border-style:     solid;
             border-color:     fn.color(--border);
-            background-color: fn.color(--bg);
-        
-            &:first-child {
-                border-left-width: 1px;
-            }
-        
-            &:last-child {
-                border-right-width: 1px;
-            }
         }
 
         @include iro.bem-elem('row') {
-            &:first-child {
-                @include iro.bem-elem('cell') {
-                    &:first-child {
-                        border-top-left-radius: fn.dim(--rounding);
-                    }
-        
-                    &:last-child {
-                        border-top-right-radius: fn.dim(--rounding);
-                    }
-                }
-            }
-
             &:last-child {
                 @include iro.bem-elem('cell') {
                     border-bottom-width: 1px;
-
-                    &:first-child {
-                        border-bottom-left-radius: fn.dim(--rounding);
-                    }
-        
-                    &:last-child {
-                        border-bottom-right-radius: fn.dim(--rounding);
-                    }
-                }
-            }
-
-            @include iro.bem-next-twin-elem {
-                @include iro.bem-elem('cell') {
-                    border-top: 1px solid fn.color(--border);
                 }
             }
 
@@ -100,5 +65,57 @@
                 }
             }
         }
+
+        @include iro.bem-modifier('flush') {
+            @include iro.bem-elem('head-cell', 'cell') {
+                &:first-child {
+                    padding-left: 0;
+                }
+
+                &:last-child {
+                    padding-right: 0;
+                }
+            }
+        }
+
+        @include iro.bem-modifier('box') {
+            @include iro.bem-elem('cell') {
+                background-color: fn.color(--bg);
+            
+                &:first-child {
+                    border-left-width: 1px;
+                }
+            
+                &:last-child {
+                    border-right-width: 1px;
+                }
+            }
+    
+            @include iro.bem-elem('row') {
+                &:first-child {
+                    @include iro.bem-elem('cell') {
+                        &:first-child {
+                            border-top-left-radius: fn.dim(--rounding);
+                        }
+            
+                        &:last-child {
+                            border-top-right-radius: fn.dim(--rounding);
+                        }
+                    }
+                }
+    
+                &:last-child {
+                    @include iro.bem-elem('cell') {
+                        &:first-child {
+                            border-bottom-left-radius: fn.dim(--rounding);
+                        }
+            
+                        &:last-child {
+                            border-bottom-right-radius: fn.dim(--rounding);
+                        }
+                    }
+                }
+            }
+        }
     }
 }
diff --git a/tpl/index.pug b/tpl/index.pug
index b5fe23b..5c46906 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -626,3 +626,55 @@ html
                             +table-cell= 'Row 4,1'
                             +table-cell= 'Row 4,2'
                             +table-cell= 'Row 4,3'
+
+            +box
+                +table(flush=true)
+                    +table-head
+                        +table-row 
+                            +table-head-cell= 'Title'
+                            +table-head-cell= 'Title'
+                            +table-head-cell= 'Title'
+                    +table-body
+                        +table-row 
+                            +table-cell= 'Row 1,1'
+                            +table-cell= 'Row 1,2'
+                            +table-cell= 'Row 1,3'
+                        +table-row 
+                            +table-cell= 'Row 2,1'
+                            +table-cell= 'Row 2,2'
+                            +table-cell= 'Row 2,3'
+                        +table-row 
+                            +table-cell= 'Row 3,1'
+                            +table-cell= 'Row 3,2'
+                            +table-cell= 'Row 3,3'
+                        +table-row 
+                            +table-cell= 'Row 4,1'
+                            +table-cell= 'Row 4,2'
+                            +table-cell= 'Row 4,3'
+
+            +box
+                +table(box=true)
+                    +table-head
+                        +table-row 
+                            +table-head-cell= 'Title'
+                            +table-head-cell= 'Title'
+                            +table-head-cell= 'Title'
+                    +table-body
+                        +table-row 
+                            +table-cell= 'Row 1,1'
+                            +table-cell= 'Row 1,2'
+                            +table-cell= 'Row 1,3'
+                        +table-row 
+                            +table-cell= 'Row 2,1'
+                            +table-cell= 'Row 2,2'
+                            +table-cell= 'Row 2,3'
+                        +table-row 
+                            +table-cell= 'Row 3,1'
+                            +table-cell= 'Row 3,2'
+                            +table-cell= 'Row 3,3'
+                        +table-row 
+                            +table-cell= 'Row 4,1'
+                            +table-cell= 'Row 4,2'
+                            +table-cell= 'Row 4,3'
+
+
diff --git a/tpl/objects/table.pug b/tpl/objects/table.pug
index 9fb2a06..0e1632d 100644
--- a/tpl/objects/table.pug
+++ b/tpl/objects/table.pug
@@ -1,5 +1,12 @@
 mixin table
-    table.o-table
+    -
+        let classes = {
+            'o-table':        true,
+            'o-table--flush': attributes.flush,
+            'o-table--box':   attributes.box,
+        }
+
+    table(class=classes)
         block
 
 mixin table-head