h1 {
  text-decoration: underline;
}

.x {
color-mix(
  in srgb,
  transparent calc(100% * var(--_state---true)),
  var(--_theme---text) calc(100% * var(--_state---false))
)
}

.x-text {
    color-mix(
    in srgb,
    currentColor calc(100% * var(--_state---true)),
    var(--_theme---background) calc(100% * var(--_state---false))
  )
}