@layer components{@property --table-border-width{syntax: "<length>"; inherits: true; initial-value: 2px;}table{border:none;outline:none;font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight-normal);line-height:var(--line-height);text-align:left;position:relative;border-spacing:0 0}table:before{content:"";position:absolute;top:calc(.5lh - (var(--table-border-width) / 2));left:calc(.5ch - (var(--table-border-width) / 2));width:calc(100% - 1ch - var(--table-border-width));height:calc(100% - 1lh - var(--table-border-width));border:solid var(--table-border-width) var(--table-border-color)}table :first-child>tr:first-child>td,table :first-child>tr:first-child>th{padding-top:1lh}table :first-child>tr:first-child>td:before,table :first-child>tr:first-child>th:before{height:calc(100% - 1lh)}table :last-child>tr:last-child>td:before,table :last-child>tr:last-child>th:before{height:calc(100% + 1lh)}table tr th{font-weight:var(--font-weight-bold)}table tr th,table tr td{position:relative;padding-right:1ch;padding-bottom:1lh}table tr th:first-of-type,table tr td:first-of-type{padding-left:1ch}table tr th:before,table tr td:before{content:"";position:absolute;right:calc(.5ch - var(--table-border-width) / 2);bottom:calc(.5lh - var(--table-border-width) / 2);border-left:solid var(--table-border-width) var(--table-border-color);height:100%}table tr th:after,table tr td:after{content:"";position:absolute;left:calc(.5ch + var(--table-border-width) / 2);bottom:calc(.5lh - var(--table-border-width) / 2);width:100%;border-top:solid var(--table-border-width) var(--table-border-color)}table tr th:last-of-type:after,table tr td:last-of-type:after{width:calc(100% - 1ch)}table thead+tbody tr:first-of-type td,table thead+tbody tr:first-of-type th,table tbody+tfoot tr:first-of-type td,table tbody+tfoot tr:first-of-type th{padding-top:0}}
