.type-ribbon-wrapper{display:inline-flex;gap:4px;flex-wrap:wrap}.type-ribbon{display:inline-flex;padding:4px 8px;width:100%;height:1.5rem;justify-content:center;align-items:center;border-radius:var(--border-radius);font-weight:700;color:white;text-transform:uppercase;font-size:12px;border:2px solid;& .type-ribbon__icon{font-size:1rem}}.type-ribbon-wrapper--icon{& .type-ribbon{gap:.5rem;height:1.75rem;& svg{display:flex}}}.type-ribbon.normal{border-color:color-mix(in srgb,var(--color-normal) 80%,white);color:#000}.type-ribbon.normal,.type-ribbon.normal:before{background-color:var(--color-normal)}.type-ribbon.fire{border-color:color-mix(in srgb,var(--color-fire) 60%,white);color:#000}.type-ribbon.fire,.type-ribbon.fire:before{background-color:var(--color-fire)}.type-ribbon.water{border-color:color-mix(in srgb,var(--color-water) 60%,white)}.type-ribbon.water,.type-ribbon.water:before{background-color:var(--color-water)}.type-ribbon.electric{border-color:color-mix(in srgb,var(--color-electric) 70%,white);color:#000}.type-ribbon.electric,.type-ribbon.electric:before{background-color:var(--color-electric)}.type-ribbon.grass{border-color:color-mix(in srgb,var(--color-grass) 70%,white);color:#000}.type-ribbon.grass,.type-ribbon.grass:before{background-color:var(--color-grass)}.type-ribbon.ice{border-color:color-mix(in srgb,var(--color-ice) 80%,white);color:#000}.type-ribbon.ice,.type-ribbon.ice:before{background-color:var(--color-ice)}.type-ribbon.fighting{border-color:color-mix(in srgb,var(--color-fighting) 70%,white);color:#000}.type-ribbon.fighting,.type-ribbon.fighting:before{background-color:var(--color-fighting)}.type-ribbon.poison{border-color:color-mix(in srgb,var(--color-poison) 70%,white)}.type-ribbon.poison,.type-ribbon.poison:before{background-color:var(--color-poison)}.type-ribbon.ground{border-color:color-mix(in srgb,var(--color-ground) 60%,white)}.type-ribbon.ground,.type-ribbon.ground:before{background-color:var(--color-ground)}.type-ribbon.flying{border-color:color-mix(in srgb,var(--color-flying) 70%,white);color:#000}.type-ribbon.flying,.type-ribbon.flying:before{background-color:var(--color-flying)}.type-ribbon.psychic{border-color:color-mix(in srgb,var(--color-psychic) 75%,white)}.type-ribbon.psychic,.type-ribbon.psychic:before{background-color:var(--color-psychic)}.type-ribbon.bug{border-color:color-mix(in srgb,var(--color-bug) 80%,white);color:#000}.type-ribbon.bug,.type-ribbon.bug:before{background-color:var(--color-bug)}.type-ribbon.rock{border-color:color-mix(in srgb,var(--color-rock) 70%,white);color:#000}.type-ribbon.rock,.type-ribbon.rock:before{background-color:var(--color-rock)}.type-ribbon.ghost{border-color:color-mix(in srgb,var(--color-ghost) 70%,white)}.type-ribbon.ghost,.type-ribbon.ghost:before{background-color:var(--color-ghost)}.type-ribbon.dragon{border-color:color-mix(in srgb,var(--color-dragon) 70%,white)}.type-ribbon.dragon,.type-ribbon.dragon:before{background-color:var(--color-dragon)}.type-ribbon.dark{border-color:color-mix(in srgb,var(--color-dark) 70%,white)}.type-ribbon.dark,.type-ribbon.dark:before{background-color:var(--color-dark)}.type-ribbon.steel{border-color:color-mix(in srgb,var(--color-steel) 70%,white);color:#000}.type-ribbon.steel,.type-ribbon.steel:before{background-color:var(--color-steel)}.type-ribbon.fairy{border-color:color-mix(in srgb,var(--color-fairy) 70%,white);color:#000}.type-ribbon.fairy,.type-ribbon.fairy:before{background-color:var(--color-fairy)}.type-ribbon.stellar{border-color:color-mix(in srgb,var(--color-primary) 70%,white)}.type-ribbon.stellar,.type-ribbon.stellar:before{background-color:var(--color-primary)}.type-ribbon-wrapper--small-on-mobile{@media (max-width:768px){& .type-ribbon{padding:2px 4px;height:1.25rem;font-size:.65rem;gap:2px;& .type-ribbon__icon{display:none}}}}.type-ribbon-wrapper--boring{& .type-ribbon{background-color:var(--color-background-30);border-width:1px 1px 1px 8px;font-weight:500;color:var(--color-font)}}