// Tooltips provided by jQuery UI Tooltip js plugin
.ui-tooltip.ui-tooltip--nav {
  background-color: #333333;
  color: #fff;
  padding: 20px 10px;
  box-shadow: none;
  @include border-radius(16px);
  @include opacity(1);
  border: 0;
  margin: 0;
  width: 110px;

  // Override the JS so we can keep the position within CSS
  top: 157px !important;

  //Reposition this to take our admin menu into account
  .user-logged-in & {
    top: 236px !important;
  }

  &:before {
    content: "";
    position: absolute;
    top: -15px;
    left: 50%;
    margin-left: -15px;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-bottom-color: #333333;
  }

  .ui-tooltip-content {
    text-align: center;
    font-family: $font-regular;
    font-size: 14px;
    line-height: 21px;
    color: white;
  }
}

// Hide tooltips when we're scrolling a stickynav to avoid positioning issues and terrible UX
header[role=banner].sticky-nav__header.scrolling ~ .ui-tooltip {
  display: none !important;
}