@property --tooltip-gap {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --tooltip-margin {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

.tooltip {
  display: inline-flex;
}

.tooltip__bubble {
  --tooltip-gap: var(--space-2xs);
  --tooltip-margin: var(--space-md);
  --tooltip-max-size: 16rem;

  position: fixed;
  inset-block-start: var(--tooltip-block-start, 0);
  inset-inline-start: var(--tooltip-inline-start, 0);
  inline-size: max-content;
  max-inline-size: min(var(--tooltip-max-size), calc(100vw - 2 * var(--tooltip-margin)));
  padding-block: var(--space-xs);
  padding-inline: var(--space-sm);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-md);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-ui);
  text-align: center;
  text-wrap: balance;
  overflow-wrap: anywhere;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  translate: 0 var(--space-2xs);
  transition:
    opacity var(--duration-leave) var(--easing-leave),
    translate var(--duration-leave) var(--easing-leave),
    visibility var(--duration-leave) var(--easing-leave);
}

.tooltip__key {
  --icon-size: 0.875em;
  --tooltip-key-size: 1.5em;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--tooltip-key-size);
  min-block-size: var(--tooltip-key-size);
  margin-inline-start: var(--space-2xs);
  padding-inline: var(--space-2xs);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  vertical-align: middle;
  white-space: nowrap;
}

.tooltip__bubble[data-side="bottom"] {
  translate: 0 calc(-1 * var(--space-2xs));
}

.tooltip__bubble::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  block-size: var(--space-2xs);
}

.tooltip__bubble[data-side="bottom"]::after {
  inset-block-start: auto;
  inset-block-end: 100%;
}

.tooltip__bubble[data-open] {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  translate: 0 0;
  transition:
    opacity var(--duration-enter) var(--easing-enter) var(--delay-intent),
    translate var(--duration-enter) var(--easing-enter) var(--delay-intent),
    visibility var(--duration-enter) var(--easing-enter) var(--delay-intent);
}

@media (forced-colors: active) {
  .tooltip__bubble,
  .tooltip__key {
    border: var(--border-width) solid currentcolor;
  }
}