/* The box is fixed, never built with padding: the semantic spacing scale starts at 4px, so 16px and
   24px boxes would need 1px and 2px of padding, values that are not tokens. Fixing width/height and
   centring the glyph also means the box measures exactly its size whatever the glyph is, which is
   what makes the piece droppable into a table cell. Same centring pattern as md-icon-button. */
.md-ctx-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--md-content-secondary);
  background: transparent;
  border: none;
  /* The glyph box is a line box (FMD is an icon font), so any inherited leading would offset it
     inside the fixed square. That is what --md-line-height-0 exists for. */
  line-height: var(--md-line-height-0);
}

/* box sizes — the token names the box, not the glyph */

.md-ctx-help.md-ctx-help--sm {
  width: var(--md-spacing-xs);
  height: var(--md-spacing-xs);
  font-size: var(--md-font-size-4);
}

.md-ctx-help.md-ctx-help--md {
  width: var(--md-spacing-sm);
  height: var(--md-spacing-sm);
  font-size: var(--md-font-size-6);
}

.md-ctx-help.md-ctx-help--lg {
  width: var(--md-spacing-mn);
  height: var(--md-spacing-mn);
  font-size: var(--md-font-size-7);
}

/* trigger modes — the cursor is the only affordance difference: the tooltip informs, the toggletip
   is activated. Neither gets a hover surface or a pressed state: this is not an action. */

.md-ctx-help--hover {
  cursor: help;
}

.md-ctx-help--click {
  cursor: pointer;
}

/* state - hover */

.md-ctx-help:hover {
  color: var(--md-content-primary);
}

/* state - focus */

.md-ctx-help:focus-visible {
  color: var(--md-content-primary);
  outline: var(--md-border-width-mn) solid var(--md-border-focus);
  outline-offset: 2px;
}

/* The accessible bubble: the element aria-describedby / aria-controls point at. Visually hidden
   with the clip technique and not with display:none or visibility:hidden, which would take it out
   of the accessibility tree and defeat its whole purpose. The 1px values are the constants of that
   technique, not design measurements. */
.md-ctx-help__bubble {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}