.span {
    position: relative;
    display: inline-block;
    border: 1px solid var(--md-sys-color-outline);
    background: var(--md-sys-color-surface-variant);
    border-radius: 4px;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 1em;
    padding-inline: 0.2em;
}

.spanSimple {
    position: relative;
    display: inline-block;
    padding-inline-start: 0.2em;
}

.tooltip {
    --background: var(--md-sys-color-primary-container);

    position: absolute;
    z-index: 1;
    display: none;
    width: max-content;
    height: max-content;
    padding: 0.5em;
    margin: auto 0;
    background: var(--background);
    border-radius: 0.7em;
    box-shadow: 0 0 6px 1px var(--md-sys-color-shadow);
    color: var(--md-sys-color-on-primary-container);
    inset-block: -5000%;
    inset-inline-start: calc(100% + var(--arrow-width));

    --arrow-width: 0.6em;
    --arrow-height: 0.4em;
}

.span:is(:focus, :hover) > .tooltip {
    display: initial;
}

.tooltip::before {
    position: absolute;
    height: max-content;
    border-width: var(--arrow-height) var(--arrow-width) var(--arrow-height) 0;
    border-style: solid;
    border-color: transparent var(--background) transparent transparent;
    margin: auto 0;
    content: "";
    inset-block: 0;
    inset-inline-start: calc(var(--arrow-width) * -1 + 1px);
}

.img {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-inline-end: 0.2em;
    transform: translateY(0.1em);
}

.base {
    color: var(--md-sys-color-tertiary);
}

.produced {
    color: var(--md-ref-palette-primary70);
}

.unknown {
    color: inherit;
}

.strong {
    font-weight: 600;
    margin-block: 1em 0.4em;
}

.strong:first-child {
    margin-block-start: 0;
}

.usedBy {
    max-width: 20em;
}

.leftClick {
    height: 1em;
    transform: translateY(0.1em);
}

.rightClick {
    height: 1em;
    transform: scaleX(-1) translateY(0.1em) !important;
}

.clickBtn {
    fill: red;
}