[data-tooltip]
  cursor: pointer
  position: relative

[data-tooltip]:before,
[data-tooltip-after]:after
  background-color: $text-strong
  border-radius: 2px
  bottom: 100%
  color: #fff
  content: attr(data-tooltip)
  font-family: $family-primary
  font-size: 0.6rem
  font-weight: 400
  left: 50%
  line-height: 1.2
  opacity: 0
  padding: 0.5em 0.6em
  pointer-events: none
  position: absolute
  text-align: center
  transform: translateX(-50%) translateY(0)
  transition-duration: $speed
  transition-property: opacity, transform
  visibility: hidden
  white-space: nowrap

[data-tooltip-after]:after
  content: attr(data-tooltip-after)

[data-tooltip]:hover:before,
[data-tooltip-after]:hover:after
  opacity: 1
  transform: translateX(-50%) translateY(-4px)
  visibility: visible

[data-tooltip].is-copied:before
  background: $green
  content: "Copied!"