@include desktop {

  /* stylelint-disable no-duplicate-selectors */
  // NOTE: These won't work on elements that use :before on something else, for example icons

  // Declarative (super simple) tooltips
  [data-tooltip-up],
  [data-tooltip-up-left],
  [data-tooltip-up-right],
  [data-tooltip-left],
  [data-tooltip-right],
  [data-tooltip-down],
  [data-tooltip-down-left],
  [data-tooltip-down-right] {
    position: relative;

    // Hide the tooltip content by default
    &:before {
      // visibility: hidden;
      position: absolute;
      box-sizing: border-box;
      pointer-events: none;
      z-index: 25;
      opacity: 0;

      transition-property: transform, opacity;
      transition-duration: $transition-medium;
      transition-timing-function: $easing-snap;
    }

    // Show tooltip content on hover
    &:hover {
      &:before {
        // visibility: visible;
        opacity: 1;
        transition-duration: $transition-fast;
      }
    }

    // Position tooltip above the element
    &:before {
      @include pad-tight;
      line-height: $line-height-tight;

      letter-spacing: normal;
      font-size: $default-font-size;
      font-weight: normal;
      text-transform: none;
      text-align: center;
      white-space: nowrap;

      @include radius;
      color: $white;
      background-color: $dark;
    }

  }

  // Content
  [data-tooltip-up]:before {
    content: attr(data-tooltip-up);
  }
  [data-tooltip-up-left]:before {
    content: attr(data-tooltip-up-left);
  }
  [data-tooltip-up-right]:before {
    content: attr(data-tooltip-up-right);
  }
  [data-tooltip-left]:before {
    content: attr(data-tooltip-left);
  }
  [data-tooltip-right]:before {
    content: attr(data-tooltip-right);
  }
  [data-tooltip-down]:before {
    content: attr(data-tooltip-down);
  }
  [data-tooltip-down-left]:before {
    content: attr(data-tooltip-down-left);
  }
  [data-tooltip-down-right]:before {
    content: attr(data-tooltip-down-right);
  }



  // Vertical positioning
  [data-tooltip-up],
  [data-tooltip-up-left],
  [data-tooltip-up-right] {
    &:before {
      bottom: 100%;
      margin-bottom: $pad-vertical;
    }
  }
  [data-tooltip-down],
  [data-tooltip-down-left],
  [data-tooltip-down-right] {
    &:before {
      top: 100%;
      margin-top: $pad-vertical;
    }
  }



  // Horizontal positioning
  [data-tooltip-up-left] {
    &:before {
      left: 0;
      transform: translate3d(0, 0.25rem, 0);
    }
    &:hover {
      &:before {
        transform: translate3d(0, 0, 0);
      }
    }
  }
  [data-tooltip-up] {
    &:before {
      left: 50%;
      transform: translate3d(-50%, 0.25rem, 0);
    }
    &:hover {
      &:before {
        transform: translate3d(-50%, 0, 0);
      }
    }
  }
  [data-tooltip-up-right] {
    &:before {
      right: 0;
      transform: translate3d(0, 0.25rem, 0);
    }
    &:hover {
      &:before {
        transform: translate3d(0, 0, 0);
      }
    }
  }
  [data-tooltip-down-left] {
    &:before {
      left: 0;
      transform: translate3d(0, 0.25rem, 0);
    }
    &:hover {
      &:before {
        transform: translate3d(0, 0, 0);
      }
    }
  }
  [data-tooltip-down] {
    &:before {
      left: 50%;
      transform: translate3d(-50%, 0.25rem, 0);
    }
    &:hover {
      &:before {
        transform: translate3d(-50%, 0, 0);
      }
    }
  }
  [data-tooltip-down-right] {
    &:before {
      right: 0;
      transform: translate3d(0, 0.25rem, 0);
    }
    &:hover {
      &:before {
        transform: translate3d(0, 0, 0);
      }
    }
  }



  // Vertically centered
  [data-tooltip-left],
  [data-tooltip-right] {
    &:before {
      top: 50%;
    }
  }
  [data-tooltip-left] {
    &:before {
      right: 100%;
      transform: translate3d(-0.25rem, -50%, 0);
    }
    &:hover {
      &:before {
        transform: translate3d(-$pad-vertical, -50%, 0);
      }
    }
  }
  [data-tooltip-right] {
    &:before {
      left: 100%;
      transform: translate3d(0.25rem, -50%, 0);
    }
    &:hover {
      &:before {
        transform: translate3d($pad-vertical, -50%, 0);
      }
    }
  }

}