@define refs {
  name: table;
}

@alga {refs.name} {
  .{refs.name} {
    ref: width-100pct borderCollapse-collapse;
    
    tr th,
    tr td {
      ref: textAlign-left verticalAlign-middle padding-0.75rem;
    }
  }
  
  .{refs.name}Border {
    ref: borderTop-1px_solid_hexd9d9d9 borderRight-1px_solid_hexd9d9d9 borderBottom-1px_solid_hexd9d9d9;
    prefers-dark: borderTopColor-hex5f5f5f borderRightColor-hex5f5f5f borderBottomColor-hex5f5f5f;
    prefers-toDark: borderTopColor-hex5f5f5f borderRightColor-hex5f5f5f borderBottomColor-hex5f5f5f;
    prefers-toLight: borderTopColor-hexd9d9d9 borderRightColor-hexd9d9d9 borderBottomColor-hexd9d9d9;
    
    thead {
      ref: borderBottom-1px_solid_hexd9d9d9;
      prefers-dark: borderBottomColor-hex5f5f5f;
      prefers-toDark: borderBottomColor-hex5f5f5f;
      prefers-toLight: borderBottomColor-hexd9d9d9;
    }
    
    tfoot {
      ref: borderTop-1px_solid_hexd9d9d9;
      prefers-dark: borderTopColor-hex5f5f5f;
      prefers-toDark: borderTopColor-hex5f5f5f;
      prefers-toLight: borderTopColor-hexd9d9d9;
    }
    
    tr {
      ref: borderBottom-1px_solid_hexd9d9d9;
      prefers-dark: borderBottomColor-hex5f5f5f;
      prefers-toDark: borderBottomColor-hex5f5f5f;
      prefers-toLight: borderBottomColor-hexd9d9d9;
    }
    
    tr:last-child {
      ref: borderBottomWidth-0px;
    }
    
    th, td {
      ref: borderLeft-1px_solid_hexd9d9d9;
      prefers-dark: borderLeftColor-hex5f5f5f;
      prefers-toDark: borderLeftColor-hex5f5f5f;
      prefers-toLight: borderLeftColor-hexd9d9d9;
    }
  }
  
  .{refs.name}List {
    ref: border-1px_solid_hexd9d9d9;
    prefers-dark: borderColor-hex5f5f5f;
    prefers-toDark: borderColor-hex5f5f5f;
    prefers-toLight: borderColor-hexd9d9d9;
    
    thead {
      ref: borderBottom-1px_solid_hexd9d9d9;
      prefers-dark: borderBottomColor-hex5f5f5f;
      prefers-toDark: borderBottomColor-hex5f5f5f;
      prefers-toLight: borderBottomColor-hexd9d9d9;
    }
    
    tfoot {
      ref: borderTop-1px_solid_hexd9d9d9;
      prefers-dark: borderTopColor-hex5f5f5f;
      prefers-toDark: borderTopColor-hex5f5f5f;
      prefers-toLight: borderTopColor-hexd9d9d9;
    }
    
    tr {
      ref: borderBottom-1px_solid_hexd9d9d9;
      prefers-dark: borderBottomColor-hex5f5f5f;
      prefers-toDark: borderBottomColor-hex5f5f5f;
      prefers-toLight: borderBottomColor-hexd9d9d9;
    }
    
    tr:last-child {
      ref: borderBottomWidth-0px;
    }
  }
   
  .{refs.name}Responsive {
    screen-tb: overflowX-auto overflowY-visible;
  }
  
  .{refs.name}Flush {
    ref: border-none;
    
    &.{refs.name}Border tr th:first-child,
    &.{refs.name}Border tr td:first-child {
      ref: borderLeft-none;
    }
  }
  
  html[dir=rtl] .{refs.name} {
    tr th,
    tr td {
      ref: textAlign-right;
    }
  }
}