.tbl-logo {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: currentColor;
  mask: url('data:image/svg+xml,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 width%3D%22120%22 height%3D%22120%22 viewBox%3D%220 0 120 120%22%3E%3Cpolygon points%3D%2260%2C5 110%2C32.5 110%2C87.5 60%2C115 10%2C87.5 10%2C32.5%22 fill%3D%22none%22 stroke%3D%22currentColor%22 stroke-width%3D%223%22/%3E%3Ctext x%3D%2250%25%22 y%3D%2250%25%22 font-family%3D%22Arial%2C sans-serif%22 font-weight%3D%22700%22 font-size%3D%2238%22 fill%3D%22currentColor%22 text-anchor%3D%22middle%22 dominant-baseline%3D%22middle%22%3ETBL%3C/text%3E%3C/svg%3E') center / contain no-repeat;
  -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 width%3D%22120%22 height%3D%22120%22 viewBox%3D%220 0 120 120%22%3E%3Cpolygon points%3D%2260%2C5 110%2C32.5 110%2C87.5 60%2C115 10%2C87.5 10%2C32.5%22 fill%3D%22none%22 stroke%3D%22currentColor%22 stroke-width%3D%223%22/%3E%3Ctext x%3D%2250%25%22 y%3D%2250%25%22 font-family%3D%22Arial%2C sans-serif%22 font-weight%3D%22700%22 font-size%3D%2238%22 fill%3D%22currentColor%22 text-anchor%3D%22middle%22 dominant-baseline%3D%22middle%22%3ETBL%3C/text%3E%3C/svg%3E') center / contain no-repeat;
  transition: transform 0.3s ease, color 0.3s ease;
}

@supports not (mask: url('data:image/svg+xml,...')) {
  .tbl-logo {
    background: url('data:image/svg+xml,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 width%3D%22120%22 height%3D%22120%22 viewBox%3D%220 0 120 120%22%3E%3Cpolygon points%3D%2260%2C5 110%2C32.5 110%2C87.5 60%2C115 10%2C87.5 10%2C32.5%22 fill%3D%22none%22 stroke%3D%22currentColor%22 stroke-width%3D%223%22/%3E%3Ctext x%3D%2250%25%22 y%3D%2250%25%22 font-family%3D%22Arial%2C sans-serif%22 font-weight%3D%22700%22 font-size%3D%2238%22 fill%3D%22currentColor%22 text-anchor%3D%22middle%22 dominant-baseline%3D%22middle%22%3ETBL%3C/text%3E%3C/svg%3E') center / contain no-repeat;
    background-color: transparent;
  }
}