.type-name {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}

.type-name-parent {
  font-weight: inherit;
  opacity: 0.72;
}

.type-name-separator {
  color: #94a3b8;
  font-weight: inherit;
  opacity: 0.85;
}

.type-name-expand-trigger {
  position: relative;
  z-index: 1;
  flex: 0 0 1.1em;
  width: 1.1em;
  color: #94a3b8;
  font-weight: inherit;
  opacity: 0.72;
  cursor: default;
  margin-right: 3px;
  transition: opacity 0.12s ease, margin-right 0.12s ease;
}

.type-name-ellipsis {
  color: #94a3b8;
  font-weight: inherit;
  opacity: 0.85;
}

.type-name-leaf {
  font-weight: inherit;
}

.type-name-simple .type-name-parent,
.type-name-simple .type-name-separator {
  display: inline-block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  vertical-align: bottom;
  transition: max-width 0.68s ease, opacity 0.42s ease;
}

.type-name-simple .type-name-expand-trigger:hover ~ .type-name-parent,
.type-name-simple .type-name-expand-trigger:hover ~ .type-name-separator {
  max-width: 18ch;
  opacity: 0.72;
  transition-delay: 0.16s;
}

.type-name-simple .type-name-expand-trigger:hover {
  margin-right: -1.1em;
  opacity: 0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .type-name-separator {
    color: #7f8ca3;
  }

  :root:not([data-theme]) .type-name-expand-trigger {
    color: #7f8ca3;
  }

  :root:not([data-theme]) .type-name-ellipsis {
    color: #7f8ca3;
  }
}

:root[data-theme="dark"] .type-name-separator {
  color: #7f8ca3;
}

:root[data-theme="dark"] .type-name-expand-trigger {
  color: #7f8ca3;
}

:root[data-theme="dark"] .type-name-ellipsis {
  color: #7f8ca3;
}