// <input class="private-value-toggle" type="checkbox" id="{id}">
// <label class="private-value-button" for="{id}"></label><span class="private-value">{private_value}</span>

.private-value
  color: transparent
  background: #e8e8e8
  filter: opacity(50%)

  &-button
    background: #ddd url("/res/common/eye.svg") 50% 50%/contain no-repeat
    filter: opacity(50%)
    padding: 0 1em
    box-sizing: border-box
    cursor: pointer

    &::after
      content: "\00a0"
      color: transparent

  &-button + &
    margin-left: .25em

  &-toggle
    display: none

  &-toggle:checked ~ &
    color: inherit
    background: transparent
    filter: opacity(100%)
