/* make vuetify tooltips look like ours */
/* .v-tooltip__content {
  padding: 0.25em 0.5em;
  font-size: 1rem;
  background: hsla(0, 0%, 20%, 1);
  border-radius: 0.25em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  color: #eee;
  opacity: 1;
} */

/* allow CSS tooltips to break out of v-menu */
.v-menu__content:has([tooltip]) {
  contain: none;
  overflow: visible;
}
/* -- /CSS tooltips -- */

/* .mini_actions_v2_button[tooltip]:after {
  font-size: 14px;
} */

/* -- Anchor-positioned tooltip -- */
#global-tooltip {
  position: fixed;
  position-anchor: --tt-anchor;

  /* Styling */
  background: hsla(0, 0%, 20%, 1);
  border: none;
  border-radius: 0.25em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  color: #eee;
  display: inline-block;
  font-family: 'Roboto';
  font-size: 1rem;
  font-weight: normal;
  letter-spacing: normal;
  line-height: 1.2;
  opacity: 0;
  padding: 0.25em 0.5em;
  pointer-events: none;
  text-transform: none;
  transition: opacity 0.15s ease-in-out;
  white-space: pre;
  width: fit-content;
}

#global-tooltip:popover-open {
  opacity: 0.9;
}

/* Default: bottom centered */
#global-tooltip {
  top: anchor(bottom);
  left: anchor(center);
  translate: -50% 0;
  margin-top: 4px;
}

/* Position: top (centered above) */
#global-tooltip[data-position='top'] {
  top: anchor(top);
  left: anchor(center);
  translate: -50% -100%;
  margin-top: -4px;
}

/* Position: left (centered left of anchor) */
#global-tooltip[data-position='left'] {
  top: anchor(center);
  left: anchor(left);
  translate: -100% -50%;
  margin-top: 0;
  margin-left: -4px;
}

/* Position: right (centered right of anchor) */
#global-tooltip[data-position='right'] {
  top: anchor(center);
  left: anchor(right);
  translate: 0 -50%;
  margin-top: 0;
  margin-left: 4px;
}

/* Position: bottom left (below, left-aligned) */
#global-tooltip[data-position='bottom left'] {
  top: anchor(bottom);
  left: anchor(left);
  translate: 0 0;
  margin-top: 4px;
}

/* Position: bottom right (below, right-aligned) */
#global-tooltip[data-position='bottom right'] {
  top: anchor(bottom);
  left: anchor(right);
  translate: -100% 0;
  margin-top: 4px;
}

/* Position: top left (above, left-aligned) */
#global-tooltip[data-position='top left'] {
  top: anchor(top);
  left: anchor(left);
  translate: 0 -100%;
  margin-top: -4px;
}

/* Position: top right (above, right-aligned) */
#global-tooltip[data-position='top right'] {
  top: anchor(top);
  left: anchor(right);
  translate: -100% -100%;
  margin-top: -4px;
}