@mixin search-transition {
  opacity: 0;
  transform: scale3d(0.8, 0.8, 1);
  transition: opacity 0.3s, transform 0.3s;
}

@mixin tooltip {
  [data-tooltip] {
    position: relative;
    z-index: 2;
    cursor: pointer;
  }

  /* Hide the tooltip content by default */
  [data-tooltip]::before,
  [data-tooltip]::after {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  /* Position tooltip above the element */
  [data-tooltip]::before {
    position: absolute;
    bottom: 150%;
    left: 50%;
    margin-bottom: 5px;
    margin-left: -80px;
    padding: 7px;
    width: 330px;
    border-radius: 3px;
    background-color: rgb(68, 68, 69);
    color: #fff;
    content: attr(data-tooltip);
    font-size: 14px;
    line-height: 1.2;
  }

  /* Triangle hack to make tooltip look like a speech bubble */
  [data-tooltip]::after {
    position: absolute;
    bottom: 150%;
    left: 50%;
    margin-left: -5px;
    width: 0;
    border-top: 5px solid #000;
    border-top: 5px solid hsla(0, 0%, 20%, 0.9);
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    content: ' ';
    font-size: 0;
    line-height: 0;
  }

  /* Show tooltip content on hover */
  [data-tooltip]:hover::before,
  [data-tooltip]:hover::after {
    visibility: visible;
    opacity: 1;
  }
}

@mixin popover {
  position: relative;

  .popover-content {
    list-style: none;
    opacity: 0;
    position: absolute;
    bottom: 40px;
    z-index: -10;
    right: 0;
    text-align: right;
    background-color: rgba(0, 0, 0, 0.9);
    color: $white;
    font-size: 1.5rem;
    cursor: default;
    border-radius: 4px;
    pointer-events: none;
    transform: scale(0.85) translateY(10%);
    transition:
      all 0.25s cubic-bezier(0.24, 0.22, 0.015, 1.56),
      opacity 0.1s ease-in-out;

    &--is-visible {
      pointer-events: auto;
      opacity: 1;
      z-index: 300;
      transform: scale(1) translate(0);
    }

    &::before {
      border-top: 7px solid rgba(0, 0, 0, 0.9);
      border-right: 7px solid transparent;
      border-left: 7px solid transparent;
      bottom: -7px;
      content: '';
      display: block;
      right: 10px;
      margin-left: -7px;
      position: absolute;
    }

    a {
      text-decoration: underline;
      color: inherit;
    }

    .popover-label {
      font-size: 1.5rem;
      font-weight: 500;
      color: rgb(179, 179, 179);
      display: block;
      margin-bottom: 4px;
      line-height: 1.4;
    }

    button,
    .button {
      display: block;
      padding: 6px 20px;
      background-color: rgb(68, 68, 69);
      border: 1px solid rgb(68, 68, 69);
      font-size: 1.4rem;
      color: $white;
      font-family: $font-stack;
      cursor: pointer;
      margin-bottom: 15px;
      border-radius: 2px;
      text-decoration: none;

      &:hover {
        border-color: #888;
        background-color: #888;
      }
    }
  }
}
