=absolute-full
  position: absolute
  left: 0
  top: 0
  bottom: 0
  right: 0

=content-block
  +absolute-full
  content: ''
  width: 100%
  display: block

=aspect($width, $height)
  display: block
  position: relative
  padding-bottom: percentage($height / $width)
  height: 0
  overflow: hidden

=aspect-fill
  +absolute-full
  height: 100%
  width: 100%
  max-height: 100%
  max-width: 100%

=vertical-center($top: 50%)
  top: $top
  transform: translateY(-50%)

=horizontal-center($left: 50%)
  left: $left
  transform: translateX(-50%)

=center-center($top: 50%, $left: 50%)
  top: $top
  left: $left
  transform: translateX(-50%) translateY(-50%)

=no-selection
  &::selection
    background: none

=tooltip
  white-space: nowrap
  word-wrap: none
  position: absolute
  font-weight: $fontWeightNormal
  text-align: center
  top: calc(100% + #{$unit * 2})
  display: flex
  align-items: center
  justify-content: center
  height: $buttonSize
  line-height: $buttonSize
  padding: 0 $unit * 2 // 8
  font-size: $fontSizeSm
  background: #444
  color: rgba(255,255,255,1)
  transform-origin: center top
  animation: popIn $transitionNormal ease-out