.tooltip
  position: relative
  display: inline-block
  vertical-align: middle

  &:hover .tooltip__content
    display: inline-block

.tooltip__handle
  color: var(--color-light)
  height: 1.5rem
  line-height: 1.5rem
  font-size: 1.2rem
  display: inline-block
  text-align: center
  margin: 0 10px
  cursor: default
  position: relative

  &::before
    position: absolute
    top: 0
    left: 0
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)
    font-size: 15px

  &.tooltip__handle.urgency__success
    color: var(--color-success)

  &.tooltip__handle.urgency__warning
    color: var(--color-warning)

  &.tooltip__handle.urgency__error
    color: var(--color-error)

  &:hover
    color: var(--color-dark)

    &.tooltip__handle.urgency__success
      color: var(--color-success-dark)

    &.tooltip__handle.urgency__warning
      color: var(--color-warning-dark)

    &.tooltip__handle.urgency__error
      color: var(--color-error-dark)

.tooltip.tooltip__inline
  .tooltip__handle
    height: 1.0rem
    line-height: 1.0rem
    font-size: 1.0rem

.tooltip__content
  position: absolute
  display: none
  top: -10px
  transform: translateY(-100%)
  left: 3px
  width: 275px
  z-index: 10
  background-color: #fafafa
  border-radius: 4px
  padding: 13px 17px
  box-shadow: 0 0 20px 4px rgba(0, 0, 0, 0.1)

  &::after
    content: ''
    width: 16px
    height: 16px
    background-color: #fafafa
    transform: rotate(45deg)
    position: absolute
    left: 10px
    bottom: -8px

@media (max-width: 768px)
  .tooltip
    display: block
    margin-top: 10px

    .tooltip__content
      left: 3px
      right: 3px
      width: auto

// fix font color when used in tableheaders
th .tooltip__content
  color: var(--color-font)
  font-weight: normal
