.dig-tooltip {
  position: absolute;

  font-family: $contentFontFamily;
  font-size: 10px;
  line-height: 22px;
  padding: 0 8px;
  color: $white;
  overflow: hidden;
  top: -10000px;

  border-radius: 2px;
  user-select: none;
  opacity: 0;

  transition: top 0ms $ease-out-function 450ms,
              transform 450ms $ease-out-function 0ms,
              opacity 450ms $ease-out-function 0ms;

  .dig-tooltip-label {
    position: relative;
    white-space: nowrap;
  }

  .dig-tooltip-ripple {
    position: absolute;
    left: 50%;
    top: 0px;

    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: transparent;

    transition:
      width 0ms $ease-out-function 450ms,
      height 0ms $ease-out-function 450ms,
      background-color 450ms $ease-out-function 0ms;
  }

  &.dig-is-shown {
    top: -16px;
    opacity: 1;
    transform: translate3d(0, 16px, 0);

    transition:
      top 0ms $ease-out-function 0ms,
      transform 450ms $ease-out-function 0ms,
      opacity 450ms $ease-out-function 0ms;

    .dig-tooltip-ripple {
      background-color: $grey-600;
      transition:
        width 450ms $ease-out-function 0ms,
        height 450ms $ease-out-function 0ms,
        background-color 450ms $ease-out-function 0ms;
    }

  }

  &.dig-is-touch {
    font-size: 14px;
    line-height: 44px;
    padding: 0 16px;

    &.dig-is-shown {
      .dig-tooltip-ripple {
        height: 105px;
        width: 105px;
      }
    }
  }
}