.subject-badge {
    --badge-font-size: inherit;
    --badge-padding-left: 22px;
    --badge-icon-top-bottom: 3px;
    --badge-icon-left: 4px;

    font-size: var(--badge-font-size);
}
.subject-badge[data-cdn] {
    --badge-padding-left: 38px;
}
.view-page-header__prelude .subject-badge {
    --badge-font-size: 85%;
    --badge-padding-left: 27px;
    --badge-icon-top-bottom: 4px;
    --badge-icon-left: 5px;
}
.view-page-header__prelude .subject-badge[data-cdn] {
    --badge-padding-left: 47px;
}
.view-table-cell:not(.details) > .subject-badge:first-child,
.view-table-cell:not(.details) > .view-badge:first-child {
    margin-left: -6px;
}

.subject-badge:is(
    .subject-badge_type__script,
    .subject-badge_type__node,
    .subject-badge_type__deno,
    .subject-badge_type__electron,
    .subject-badge_type__npm,
    .subject-badge_type__github,
    .subject-badge_type__jsr,
    .subject-badge_type__denoland,
    .subject-badge_type__chrome-extension,
    .subject-badge_type__wasm
) .prefix {
    padding-left: var(--badge-padding-left);
    margin-left: calc(-1 * var(--badge-padding-left));
}
.subject-badge .prefix {
    background-color: #8080801f;
}

.subject-badge_type__script,
.subject-badge_type__node,
.subject-badge_type__deno,
.subject-badge_type__electron,
.subject-badge_type__npm,
.subject-badge_type__github,
.subject-badge_type__jsr,
.subject-badge_type__denoland,
.subject-badge_type__chrome-extension,
.subject-badge_type__wasm {
    padding-left: var(--badge-padding-left) !important;
    position: relative;
}
.subject-badge_type__script::before,
.subject-badge_type__node::before,
.subject-badge_type__deno::before,
.subject-badge_type__electron::before,
.subject-badge_type__npm::before,
.subject-badge_type__github::before,
.subject-badge_type__jsr::before,
.subject-badge_type__denoland::before,
.subject-badge_type__chrome-extension::before,
.subject-badge_type__wasm::before {
    content: '';
    position: absolute;
    top: var(--badge-icon-top-bottom);
    bottom: var(--badge-icon-top-bottom);
    left: var(--badge-icon-left);
    aspect-ratio: 1 / 1;
    background-repeat: no-repeat;
    background-position: left center, right center;
    background-size: contain;
    background-image: var(--icon), var(--cdn, none);
}
.subject-badge[data-cdn]::before {
    padding-right: 4px;
    aspect-ratio: 2 / 1;
}
.subject-badge[data-cdn="esmsh"]::before {
    --cdn: url('../img/esmsh.svg');
}
.subject-badge[data-cdn="jsdelivr"]::before {
    --cdn: url('../img/jsdelivr.svg');
}
.subject-badge[data-cdn="jspm"]::before {
    --cdn: url('../img/jspm.svg');
}
.subject-badge[data-cdn="unpkg"]::before {
    --cdn: url('../img/unpkg.svg');
}
.subject-badge[data-cdn="skypack"]::before {
    --cdn: url('../img/skypack.svg');
}
.subject-badge_type__script::before {
    filter: brightness(.85);
    --icon: url('../img/js.svg');
}
.subject-badge_type__node::before {
    --icon: url('../img/nodejs.png');
}
.subject-badge_type__deno::before {
    filter: brightness(.85);
    --icon: url('../img/deno.svg');
}
.subject-badge_type__electron::before {
    --icon: url('../img/electron.ico');
    filter: brightness(1.1);
}
.discovery-root-darkmode .subject-badge_type__electron::before {
    filter: brightness(1.7);
}
.subject-badge_type__npm::before {
    --icon: url('../img/npm.svg');
}
.discovery-root-darkmode .subject-badge_type__npm::before {
    filter: brightness(.9);
}
.subject-badge_type__github::before {
    --icon: url('../img/github-white.svg');
}
.subject-badge_type__jsr::before {
    --icon: url('../img/jsr.svg');
    filter: brightness(.9);
}
.subject-badge_type__denoland::before {
    --icon: url('../img/deno.svg');
}
.subject-badge_type__chrome-extension::before {
    --icon: url('../img/chrome-extension.png');
}
.subject-badge_type__wasm::before {
    --icon: url('../img/wasm.svg');
}

.subject-badge.package[data-version]::after,
.subject-badge .prefix[data-version]::after {
    content: attr(data-version);
    display: inline-block;
    padding-left: 1ex;
    padding-bottom: calc(var(--badge-icon-top-bottom) - 2px);
    max-width: 10ex;
    vertical-align: middle;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 12px;
    font-size: 10px;
    color: #999;
}
