/* ==========================================================
   BRACKETGRAMS V4 — GLOBAL IMMEDIATE TOOLTIPS
   ========================================================== */

.bg-tooltip {
  position: fixed;
  z-index: 1000000;

  left: 0;
  top: 0;

  max-width:
    min(
      300px,
      calc(100vw - 24px)
    );

  padding:
    7px 10px 8px;

  border:
    1px solid
    rgba(
      235,
      242,
      255,
      .22
    );

  border-radius: 9px;

  background:
    rgba(
      7,
      9,
      15,
      .93
    );

  color:
    rgba(
      248,
      250,
      255,
      .96
    );

  box-shadow:
    0 8px 26px
      rgba(0,0,0,.32),
    inset 0 1px 0
      rgba(255,255,255,.05);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  font-family:
    "Dosis",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-size: 13px;
  font-weight: 600;

  line-height: 1.18;

  letter-spacing:
    .035em;

  text-align: center;

  white-space: normal;

  pointer-events: none;

  opacity: 0;

  visibility: hidden;

  transform:
    translate3d(
      0,
      3px,
      0
    )
    scale(.97);

  transform-origin:
    center bottom;

  transition:
    opacity 70ms linear,
    transform 90ms
      cubic-bezier(.22,.75,.24,1),
    visibility 0s linear 90ms;

  will-change:
    transform,
    opacity;
}


.bg-tooltip[data-open="true"] {
  opacity: 1;

  visibility: visible;

  transform:
    translate3d(
      0,
      0,
      0
    )
    scale(1);

  transition:
    opacity 45ms linear,
    transform 70ms
      cubic-bezier(.22,.75,.24,1),
    visibility 0s;
}


.bg-tooltip[data-side="bottom"] {
  transform-origin:
    center top;
}


body[data-theme="day"]
.bg-tooltip {
  border-color:
    rgba(
      25,
      44,
      65,
      .18
    );

  background:
    rgba(
      246,
      249,
      252,
      .96
    );

  color:
    #18283a;

  box-shadow:
    0 8px 26px
      rgba(34,48,60,.17),
    inset 0 1px 0
      rgba(255,255,255,.72);
}


/*
 * Pointer tooltips are intentionally desktop/hover affordances.
 * Keyboard focus still gets them on devices where hover exists.
 */
@media (hover: none) {
  .bg-tooltip {
    display: none !important;
  }
}