:root {
    --rare-1: rgb(176, 195, 217);
    --rare-2: rgb(94, 152, 217);
    --rare-3: rgb(75, 105, 255);
    --rare-4: rgb(136, 71, 255);
    --rare-5: rgb(211, 44, 230);
    --rare-6: rgb(235, 75, 75);
    --rare-7: rgb(228, 174, 57);
    --stattrack: #ff7b04;
}

.skinchanger {
    display: flex;
    gap: .5rem;
    position: relative;
}

.sc__aside {
    width: 24rem;
    position: sticky;
    top: .5rem;
    height: max-content;
}

.sc__loadout {
    display: flex;
    flex-direction: column;
}

.sc__header {
    display: flex;
    background-color: var(--input-form);
    padding: 1rem;
    border-radius: var(--br-16) var(--br-16) 0 0;
    gap: .5rem;
    height: 4.2rem;
    align-items: center;
}

.sc__content {
    padding: .5rem;
    background-color: var(--card);
    border-radius: 0 0 var(--br-16) var(--br-16);
}

.sc__search {
    position: relative;
    display: flex;
    align-items: center;
}

.sc__search svg {
    position: absolute;
    right: .8rem;
    opacity: .3;
    transition: var(--transition-duration);
}

.sc__search input:focus+svg {
    opacity: 0;
}

.sc_ws-list {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.sc__collection-button,
.sc__collection-button-fake {
    display: flex;
    align-items: center;
    gap: .5rem;
    background-color: transparent;
    border-radius: var(--br-10);
    padding: .3rem .4rem;
    cursor: pointer;
    transition: var(--transition-duration);
}

.sc__collection-button-fake {
    height: 3.132rem;
}

.sc__collection-button:not(:last-child),
.sc__collection-button-fake:not(:last-child) {
    margin-bottom: .3rem;
}

.sc__add-button,
.sc__add-button-fake {
    border: 1px dashed var(--transparent-20-w);
    background-color: transparent;
    transition: var(--transition-duration);
}

.sc__add-button-fake {
    height: 3.232rem;
    border: 1px dashed transparent;
}

.sc__add-icon,
.sc__collection-icon {
    width: 2.3rem;
    height: 2.3rem;
    background-color: var(--transparent-4-w);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--br-6);
    transition: var(--transition-duration);
    flex: none;
}

.sc__add-icon svg {
    fill: currentColor;
    width: .8rem;
    height: .8rem;
}

.sc__collection-icon {
    overflow: hidden;
    position: relative;
    background-color: var(--input-form);
    border: 2px solid transparent;
    transition: var(--transition-duration);
}

.sc__collection-icon:before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--input-form);
    background-image: linear-gradient(45deg, color-mix(in srgb, var(--span) 30%, transparent), transparent);
}

.sc__collection-icon img {
    width: 4rem;
    height: auto;
    filter: brightness(1.2);
    z-index: 1;
}

.sc__add-button:hover {
    border-color: var(--span);
}

.sc__add-button:hover .sc__add-icon {
    background-color: var(--span);
    color: var(--text-default);
}

.sc__add-info,
.sc__collection-info {
    display: grid;
}

.sc__add-name,
.sc__collection-name {
    font-weight: var(--font-weight-7);
}

.sc__add-description,
.sc__collection-count {
    font-size: var(--font-size-s);
    opacity: .5;
    transition: var(--transition-duration);
}

.sc__add-button:hover .sc__add-description {
    color: var(--span);
    opacity: 1;
}

.sc__goto {
    margin-left: auto;
    width: 2.5rem;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-duration);
    display: flex;
    gap: .3rem;
    height: -webkit-fill-available;
    align-items: center;
    justify-content: center;
}

.sc__goto span {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: var(--br-50);
    background-color: var(--text-custom);
}

.sc__collection-button:hover {
    background-color: var(--transparent-2-w);
}

.sc__collection-button:hover .sc__collection-icon {
    border: 2px solid var(--span-middle);
}

.sc__collection-button.ready:hover .sc__collection-icon {
    border: 2px solid color-mix(in srgb, var(--money) 30%, transparent);
}

.sc__collection-button:hover .sc__goto {
    opacity: 1;
    visibility: visible;
}

.sc__collection-button.ready .sc__collection-icon:before {
    background: linear-gradient(45deg, var(--money), transparent);
    opacity: .5;
}

.sc__collection-limit {
    cursor: not-allowed;
    opacity: .7;
}

.sc__collection-limit:hover .sc__add-icon {
    background-color: var(--transparent-4-w);
    color: var(--text-secondary);
}

.sc__collection-limit:hover {
    background-color: transparent;
    border-color: var(--transparent-20-w);
    -webkit-user-select: none;
    user-select: none;
}

.sc__collection-limit:hover .sc__add-description {
    color: var(--text-default);
    opacity: .5;
}

.sc__collection-button.active {
    background-color: var(--transparent-5-w);
}

.sc__collection-button.active .sc__collection-icon {
    border-color: var(--span);
}

.sc__collection-button.ready.active .sc__collection-icon {
    border-color: var(--money);
}

.sc__collection-button.active .sc__collection-name,
.sc__collection-name {
    color: var(--span);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sc__collection-button.ready.active .sc__collection-name {
    color: var(--money);
}

.sc__modal-info {
    margin-bottom: 1rem;
    color: var(--text-secondary);
    max-width: 26rem;
    text-align: center;
}

.sc__modal-button {
    margin-top: .5rem;
}

.sc__loadout-title {
    font-weight: var(--font-weight-7);
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--font-size-l);
    cursor: pointer;
    color: var(--text-custom);
    transition: var(--transition-duration);
}

.sc__loadout-title svg {
    fill: currentColor;
    transition: var(--transition-duration);
}

.sc__loadout-title:hover {
    color: var(--text-default);
}

.sc__subtitle {
    font-weight: var(--font-weight-5);
    font-size: var(--font-size-s);
    color: var(--text-secondary);
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    white-space: nowrap;
    margin-block: .3rem;
}

.sc__subtitle::after {
    content: "";
    height: 1px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--text-secondary) 20%, transparent), transparent);
    flex-grow: 1;
    margin-left: 12px;
}

@media (max-width:1100px) {
    .skinchanger {
        flex-direction: column;
    }

    .sc__aside {
        width: 100%;
        position: relative;
        top: 0;
    }
}

.sc__categories {
    display: flex;
    gap: .3rem;
    flex-direction: column;
}

.sc__category-wrapper {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    max-height: 62vh;
    overflow: auto;
    padding-right: .3rem;
}

.sc__category-list,
.sc__skins-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
    gap: .3rem;
}

.sc__category-list .no-data,
.sc__skins-list .no-data {
    grid-column: 1 / -1;
    text-align: center;
}

.sc__skins-list {
    max-height: 58vh;
    overflow: auto;
}

.sc__category-item,
.sc__skin-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--input-form);
    border-radius: var(--br-8);
    cursor: pointer;
    transition: var(--transition-duration);
    overflow: hidden;
    position: relative;
    height: 4.5rem;
    border: 2px solid transparent;
}

.sc__category-item:hover,
.sc__skin-item:hover {
    background-color: var(--button);
}

.sc__category-item {
    border: none;
}

.sc__skin-item:hover {
    background-color: var(--input-form);
}

.sc__skin-item.menu-active {
    background-color: var(--input-form);
}

.sc__skin-item.menu-active .sc__choose-side {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.sc__skin-item.menu-active img {
    opacity: 0.5;
}

.sc__category-item img,
.sc__skin-item img {
    background-size: cover;
    width: 5rem;
    height: auto;
    transition: all .3s ease;
}

.sc__skin-item img {
    width: 4.5rem;
}

.sc__category-item span {
    font-size: var(--font-size-m);
    color: var(--text-custom);
    font-weight: var(--font-weight-7);
    transition: var(--transition-duration);
}

.sc__category-item p {
    font-size: var(--font-size-s);
    color: var(--text-secondary);
    transition: var(--transition-duration);
    margin: 0;
}

.show-more {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: var(--transparent-3-w);
    z-index: 1;
}

.skeleton--default {
    background: var(--transparent-1-w) !important;
}

.sc__category-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: var(--font-weight-7);
    font-size: var(--font-size-default);
    color: var(--text-custom);
    transition: var(--transition-duration);
    width: max-content;
}

.sc__back,
.sc__back-colletions {
    background-color: var(--transparent-4-w);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--br-6);
    transition: var(--transition-duration);
    font-weight: var(--font-weight-5);
    font-size: var(--font-size-s);
    padding: .5rem .7rem;
    gap: .3rem;
    cursor: pointer;
}

.sc__back svg,
.sc__back-colletions svg {
    width: .5rem;
    height: .5rem;
    fill: currentColor;
}

.sc__category-item:hover img {
    transform: scale(1.03);
    rotate: 5deg;
}

.sc__skin-item:hover img {
    transform: scale(1.1);
}

.sc__arrow {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--transparent-5-w);
    border-radius: 50%;
    opacity: 0;
    visibility: hidden;
    left: -.7rem;
    bottom: -.7rem;
    transition: var(--transition-duration);
}

.sc__arrow svg {
    width: .5rem;
    height: .5rem;
    fill: var(--text-secondary);
}

.sc__category-item:hover .sc__arrow {
    opacity: 1;
    visibility: visible;
}

.sc__category-item:has(.show-more):hover .sc__arrow {
    opacity: 0;
    visibility: hidden;
}

.sc__category-item:has(.show-more) img {
    opacity: .05;
}

.sc__category-item:has(.show-more):hover img {
    transform: none;
    rotate: unset;
}

.sc__choose-side {
    position: absolute;
    top: -1.4rem;
    right: -1.4rem;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--br-50);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-duration), visibility var(--transition-duration);
    z-index: 1;
    padding: .8rem;
}

.sc__choose-side svg {
    width: .8rem;
    height: .8rem;
    fill: currentColor;
}

.sc__skin-item:hover .sc__choose-side {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.sc__sides-list,
.sc__more-actions {
    position: fixed;
    transform: translateY(-50%);
    background-color: var(--card);
    border-radius: var(--br-12);
    padding: .5rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 10rem;
    opacity: 0;
    transition: opacity 0.15s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    pointer-events: all;
    border: 1px solid var(--transparent-5-w);
}

.sc__sides-list.visible,
.sc__more-actions.visible {
    opacity: 1;
}

.sc__side-option,
.sc__more-option {
    padding: .6rem .8rem;
    background-color: transparent;
    border-radius: var(--br-6);
    color: var(--text-secondary);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-5);
    cursor: pointer;
    transition: var(--transition-duration);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.sc__side-option img,
.sc__more-option svg {
    width: 1.2rem;
    height: 1.2rem;
    flex-shrink: 0;
    transition: var(--transition-duration);
}

.sc__more-option svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

.sc__side-option:hover,
.sc__more-option:hover,
.sc__side-option.active,
.sc__more-option.active {
    background-color: var(--button);
    color: var(--text-default);
}

.sc__skins-wrapper,
.sc__skins-fake-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: .3rem;
}

.sc__skins-card {
    display: flex;
    position: relative;
    background-color: var(--transparent-2-w);
    padding: .8rem;
    border-radius: var(--br-12);
    min-height: 13rem;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    overflow: hidden;
}

.sc__skins-image {
    width: 8rem;
    height: auto;
    z-index: 1;
    margin-top: 1rem;
    transition: var(--transition-duration);
}

.sc__skins_bg img {
    width: 6rem;
    height: 6rem;
}

.sc__skins-details {
    width: 100%;
    display: grid;
}

.sc__skins-type-weapon {
    font-size: var(--font-size-s);
    color: var(--text-custom);
    display: flex;
    align-items: center;
    gap: .3rem;
}

.sc__skins-type-weapon span {
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
}

.sc__skins-name {
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-6);
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
}

.stattrack {
    color: var(--stattrack) !important;
    border: 2px solid var(--stattrack);
    font-weight: var(--font-weight-6);
    font-size: var(--font-size-xxs) !important;
    padding: 0 .2rem;
    border-radius: var(--br-4);
    background-color: color-mix(in srgb, var(--stattrack) 10%, transparent);
}

.sc__skins-decoration {
    position: absolute;
    bottom: .5rem;
    right: .5rem;
    background-color: var(--transparent-5-w);
    border-radius: var(--br-6);
    padding: .5rem .3rem;
    border: 1px solid var(--transparent-3-w);
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-direction: column;
    z-index: 2;
    backdrop-filter: blur(3px);
    max-height: 7rem;
    overflow: auto;
    scrollbar-width: none;
    color: var(--text-secondary);
}

.sc__skins-decoration svg {
    width: 1.2rem;
    height: 1.2rem;
}

.sc__skins-decoration-wrapper {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-block: .3rem;
}

.sc__skins-sticker,
.sc__skins-keychain {
    width: auto;
    height: 1.5rem;
}

.sc__skins-stickers-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sc__skins-float {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-bottom: .15rem;
}

.sc__skins-stickers-keychains {
    color: var(--text-secondary);
}

.sc__skins-stickers-keychains svg {
    transition: var(--transition-duration);
}

.sc__skins-stickers-keychains:hover {
    color: var(--text-default)
}

.sc__skins-side {
    position: absolute;
    top: .5rem;
    right: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    padding: .4rem;
    border-radius: var(--br-6);
}

.sc__skins-side img {
    width: 1.1rem;
    height: 1.1rem;
}

.sc__skins-side.t {
    background-color: color-mix(in srgb, var(--t) 5%, transparent);
}

.sc__skins-side.ct {
    background-color: color-mix(in srgb, var(--ct) 5%, transparent);
}

.sc__skins-side.both {
    background-image: linear-gradient(270deg, color-mix(in srgb, var(--ct) 5%, transparent) 50%, color-mix(in srgb, var(--t) 5%, transparent) 50%);
}

.sc__skins-hover-layer {
    position: absolute;
    inset: 0;
    background-color: var(--transparent-3-w);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: var(--transition-duration);
    cursor: default;
}

.sc__skins-hover-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    transition: var(--transition-duration);
    width: 100%;
    justify-content: center;
}

.sc__skins-hover-content svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: var(--text-custom);
    transition: var(--transition-duration);
}

.sc__skins-hover-content:hover .sc__skins-hover-text {
    color: var(--text-default);
}

.sc__skins-hover-content:hover svg {
    fill: var(--text-default);
}

.sc__skins-hover-text {
    color: var(--text-custom);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-4);
    text-align: center;
    transition: var(--transition-duration);
}

.sc__skins-open-action {
    position: absolute;
    top: .8rem;
    left: .8rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    gap: .15rem;
    border-radius: var(--br-8);
    z-index: 2;
    padding: 0;
    background-color: var(--transparent-5-w);
    outline: none;
    border: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.sc__skins-open-action:hover,
.sc__skins-open-action.hover-active {
    background-color: var(--transparent-10-w);

}

.sc__skins-open-action:focus {
    outline: none;
    border: none;
}

.sc__skins-open-action span {
    width: 4px;
    height: 4px;
    border-radius: var(--br-50);
    background-color: var(--text-custom);
    transition: var(--transition-duration);
}


.sc__skins-card.placeholder {
    background-color: transparent;
    border: 1px solid color-mix(in srgb, var(--text-secondary) 30%, transparent);
    cursor: pointer;
    justify-content: center;
    align-items: center;
    transition: var(--transition-duration);
}

.sc__skins-card.placeholder:hover {
    border-color: color-mix(in srgb, var(--text-secondary) 50%, transparent);
}

.sc__skins-placeholder-wrapper {
    display: grid;
    gap: .3rem;
}

.sc__skins-placeholder-wrapper span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: var(--font-weight-4);
    font-size: var(--font-size-m);
    line-height: normal;
}

.sc__skins-card.placeholder:hover .sc__skins-placeholder-content {
    opacity: 0.5;
}

.sc__skins-placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: var(--text-secondary);
    opacity: .3;
    transition: var(--transition-duration);
    font-weight: var(--font-weight-6);
    text-align: center;
}

.sc__skins-placeholder-content svg {
    width: 6rem;
    height: 3rem;
    fill: currentColor;
}

.sc__skins-wrapper.edit-mode .sc__skins-card:hover .sc__skins-open-action,
.sc__skins-wrapper.edit-mode .sc__skins-card:hover .sc__skins-hover-layer,
.sc__skins-wrapper.edit-mode .sc__skins-card.hover-active,
.sc__skins-wrapper.edit-mode .sc__skins-hover-layer.show-layer,
.sc__skins-wrapper.edit-mode .sc__skins-open-action.show-button,
.sc__skins-hover-layer.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.sc__collections-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
}

.sc__aside .sc__collections-wrapper {
    grid-template-columns: 1fr;
}

.sc__community-order-wrapper {
    margin-bottom: .5rem;
}

.sc__community-order {
    width: 100%;
    padding: .5rem .75rem;
    border-radius: var(--br-8);
    background-color: var(--input-form);
    color: var(--text-secondary);
    border: 1px solid var(--transparent-5-w);
    font-size: var(--font-size-m);
    cursor: pointer;
    outline: none;
}

.sc__community-pagination {
    display: flex;
    gap: .25rem;
    justify-content: center;
    margin-top: .5rem;
}

.sc__no-collections {
    text-align: center;
    padding: 1rem;
    opacity: .5;
    font-size: var(--font-size-m);
}

@media (max-width: 1100px) {
    .sc__collections-wrapper {
        grid-template-columns: 1fr;
    }
}

.sc__collection-card {
    display: flex;
    flex-direction: column;
}

.sc__collection-card-header {
    display: flex;
    background-color: var(--input-form);
    padding: .3rem .3rem .3rem 1rem;
    border-radius: var(--br-12) var(--br-12) 0 0;
    align-items: center;
    gap: .5rem;
}

.sc__collection-left {
    display: grid;
    grid-auto-flow: column;
    gap: .5rem;
}

.sc__collection-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: var(--font-weight-7);
    font-size: var(--font-size-l);
}

.sc__collection-author {
    font-size: var(--font-size-s);
    border: 1px solid var(--transparent-5-w);
    padding: .3rem .5rem;
    border-radius: var(--br-6);
    font-weight: var(--font-weight-7);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: var(--transition-duration);
}

.sc__collection-author:hover {
    border-color: var(--transparent-20-w);
    color: var(--text-default);
}

.sc__collection-likes,
.sc__collection-downloads {
    color: var(--text-secondary);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-7);
    display: flex;
    align-items: center;
    gap: .3rem;
    cursor: pointer;
    transition: var(--transition-duration);
}

.sc__collection-downloads {
    cursor: unset;
}

.sc__collection-likes span {
    color: inherit;
}

.sc__collection-likes:hover {
    color: var(--text-default);
}

.sc__collection-likes.voted {
    color: var(--red);
}

.sc__collection-likes.voted:hover {
    color: var(--red);
}

.sc__collection-likes svg {
    fill: currentColor;
    width: .8rem;
    height: .8rem;
}

.sc__modal-buttons {
    display: flex;
    gap: .5rem;
    margin-top: 1rem;
}

.sc__collection-right {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.sc__collection-card-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
    grid-template-rows: repeat(2, 1fr);
    gap: .3rem;
    padding: .5rem;
    border-left: 1px solid var(--transparent-5-w);
    border-bottom: 1px solid var(--transparent-5-w);
    border-right: 1px solid var(--transparent-5-w);
    border-radius: 0 0 var(--br-12) var(--br-12);
    height: 100%;
}

.sc__collection-skin,
.sc__collection-skin-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--transparent-2-w);
    border-radius: var(--br-6);
    height: 4rem;
    transition: var(--transition-duration);
    width: 100%;
}

.sc__collection-skin img,
.sc__collection-skin-button img {
    width: 4rem;
    height: auto;
    transition: var(--transition-duration);
}

.sc__collection-skin:hover img,
.sc__collection-skin-button:hover img {
    transform: scale(1.05);
}

.sc__collection-skin-button.show-collection {
    position: relative;
    overflow: hidden;
}

.sc__collection-skin-button.show-collection svg {
    position: absolute;
    width: 5rem;
    height: auto;
    fill: var(--text-custom);
    opacity: .03;
    right: -1.6rem;
}

.sc__right-area {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex: 1;
    height: max-content;
}

.sc__collection-skin-preview {
    margin-bottom: .3rem;
}

.sc__collection-img-preview {
    width: 100%;
    height: auto;
    border-radius: var(--br-6);
    background-color: var(--bg);
    width: 16rem;
    height: 10rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: .2rem;
    position: relative;
    overflow: hidden;
}

.sc__collection-img-preview img {
    width: 10rem;
}

.sc__collection-skin-preview-name {
    font-weight: var(--font-weight-7);
    font-size: var(--font-size-m);
    margin-block: .5rem;
    max-width: 16rem;
}

.sc__collection-skin-preview-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .15rem;
    width: 16rem;
}

.sc__collection-skin-preview-details {
    display: grid;
    gap: .3rem;
    background-color: var(--transparent-2-w);
    padding: .5rem;
    border-radius: var(--br-8);
    align-content: start;
}

.sc__collection-skin-preview-title {
    color: var(--text-secondary);
    font-weight: var(--font-weight-5);
    font-size: var(--font-size-s);
}

.sc__collection-skin-preview-value {
    color: var(--text-default);
    font-weight: var(--font-weight-5);
    font-size: var(--font-size-m);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sc__collection-skin-preview-stickers-wrapper {
    display: flex;
    gap: .3rem;
    flex-direction: column;
    border: 1px solid var(--transparent-10-w);
    border-radius: var(--br-8);
    padding: .5rem;
    margin-top: .3rem;
    width: 16rem;
}

.sc__collection-skin-preview-stickers-keychain {
    display: flex;
    gap: .3rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-block: .5rem;
}

.sc__collection-skin-preview-stickers-keychain img {
    width: 2rem;
    height: auto;
}

.sc__collection-skin-preview-stickers-keychain-names {
    color: var(--text-custom);
    text-align: center;
    margin-bottom: .3rem;
}

.sc__modal-skin-settings {
    display: flex;
    gap: .5rem;
}

.sc__modal-skin-left,
.sc__modal-skin-right {
    flex: 1;
    min-width: 22rem;
    height: 34.638rem;
    display: flex;
    flex-direction: column;
}

.sc__modal-skin-right {
    height: auto;
    display: flex;
    flex-direction: column;
}

.sc__modal-type-collectibles,
.sc__filter-rarity,
.sc__modal-filter-sides,
.sc__modal-float-radios {
    display: flex;
    align-items: center;
    gap: .15rem;
    border: 1px solid var(--transparent-10-w);
    border-radius: var(--br-8);
    padding: .15rem;
}

.sc__filter-rarity,
.sc__modal-float-radios {
    padding: 0;
    border: none;
    flex-wrap: wrap;
    gap: .3rem;
}

.sc__modal-float-radios {
    flex-wrap: nowrap;
}

.sc__filter-rarity label,
.sc__modal-float-radios label {
    width: unset;
    padding-inline: 1rem;
    border: 2px solid var(--transparent-10-w);
    flex: 1;
}

.sc__filter-rarity label {
    padding-inline: unset;
}

.sc__modal-float-radios label {
    flex: unset;
}

.sc__modal-custom-radio {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: transparent;
    cursor: pointer;
    border-radius: var(--br-6);
    margin-bottom: 0;
    transition: 0.2s ease;
}

.sc__modal-custom-radio input {
    display: none;
}

.sc__modal-custom-radio:has(input:checked) {
    background: var(--span);
    color: var(--text-default);
}

.sc__modal-filter-sides label:has(input:checked) {
    background-color: var(--button-hover);
}

.sc__modal-filter-sides label img {
    width: 1.5rem;
    height: 1.5rem;
}

.sc__filter-rarity label:has(input:checked),
.sc__modal-float-radios label:has(input:checked) {
    border-color: transparent;
    background-color: var(--button);
    color: var(--span);
}

.sc__modal-custom-radio span {
    color: inherit;
}

.sc__modal-custom-radio span svg {
    fill: currentColor;
    width: 1.5rem;
    height: 1.5rem;
}

.sc__modal-custom-radio:hover {
    color: var(--text-default);
}

.sc__modal-collectibles-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
    gap: .3rem;
    margin-top: .5rem;
    cursor: pointer;
    height: 25.45rem;
    align-content: start;
}

.sc__modal-collectibles-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .25rem;
    margin-top: auto;
}

.sc__modal-collectibles-pagination .pagination {
    margin-bottom: 0;
}

.sc__modal-sticker-keychain {
    display: grid;
    background-color: var(--transparent-2-w);
    border-radius: var(--br-8);
    padding: .7rem;
    gap: .3rem;
    min-height: 4.85rem;
    height: 4.85rem;
}

.sc__modal-sticker-keychain span:first-child {
    height: 36px !important;
    min-height: 36px !important;
}

.sc__modal-sticker-keychain img {
    width: 3rem;
    height: auto;
    min-height: 2.25rem;
    margin: 0 auto;
}

.sc__modal-sticker-keychain span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--font-size-s);
    line-height: normal;
    color: inherit;
}

.sc__modal-skin-preview {
    position: relative;
    background-color: var(--transparent-1-w);
    border-radius: var(--br-12);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--transparent-3-w);
    height: 12rem;
}

.sc__modal-skin-preview-skin {
    width: 12rem;
    height: auto;
    z-index: 1;
}

.sc__modal-skin-side {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    font-size: var(--font-size-m);
    color: var(--text-custom);
    font-weight: var(--font-weight-4);
    line-height: normal;
}

.sc__modal-decoration {
    position: absolute;
    bottom: .5rem;
    left: .5rem;
    display: flex;
    gap: .15rem;
    z-index: 2;
}

.sc__modal-sticker-block,
.sc__modal-keychain-block {
    cursor: pointer;
    padding: .3rem;
    background-color: var(--transparent-5-w);
    border-radius: var(--br-6);
    border: 1px solid transparent;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: var(--transition-duration);
    position: relative;
    overflow: hidden;
}

.sc__modal-sticker-remove,
.sc__modal-keychain-remove {
    position: absolute;
    inset: 0;
    width: 2rem;
    height: 2rem;
    background-color: var(--transparent-20-w);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-duration);
    z-index: 2;
    opacity: 0;
    visibility: hidden;
}

.sc__modal-sticker-remove svg,
.sc__modal-keychain-remove svg {
    opacity: .7;
    transition: var(--transition-duration);
}

.sc__modal-sticker-block:has(.sc__modal-sticker img):hover .sc__modal-sticker-remove,
.sc__modal-keychain-block:has(.sc__modal-keychain img):hover .sc__modal-keychain-remove {
    opacity: 1;
    visibility: visible;
}

.sc__modal-sticker-block:hover,
.sc__modal-keychain-block:hover {
    background-color: var(--transparent-10-w);
}

.sc__modal-sticker-block:has(.sc__modal-sticker img):hover,
.sc__modal-keychain-block:has(.sc__modal-keychain img):hover {
    background-color: unset;
}

.sc__modal-sticker-block:has(.sc__modal-sticker img):hover .sc__modal-sticker img,
.sc__modal-keychain-block:has(.sc__modal-keychain img):hover .sc__modal-keychain img {
    opacity: 0.1;
}

.sc__modal-sticker-block.active,
.sc__modal-keychain-block.active {
    background-color: var(--transparent-20-w);
    border: 1px solid var(--transparent-20-w);
}

.sc__modal-sticker img,
.sc__modal-keychain img {
    width: auto;
    height: 1.3rem;
    transition: var(--transition-duration);
}

.sc__modal-sticker svg,
.sc__modal-keychain svg {
    width: .6rem;
    height: .6rem;
    fill: var(--text-secondary);
    transition: var(--transition-duration);
}

.sc__modal-sticker-block:hover svg,
.sc__modal-keychain-block:hover svg,
.sc__modal-sticker-block.active svg,
.sc__modal-keychain-block.active svg {
    fill: var(--text-default);
}

.sc__modal-filter-stickers {
    margin-top: .5rem;
}

.sc__modal-st-sides {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
}

.sc__modal-stattrak {
    height: 2.525rem;
    margin-bottom: 0;
    background-color: var(--transparent-3-w);
    padding-inline: .7rem;
    border-radius: var(--br-8);
    cursor: pointer;
    color: var(--text-custom);
    gap: .5rem;
    transition: var(--transition-duration);
}

.sc__collections-user-wrapper {
    display: flex;
    align-items: center;
    background-color: var(--transparent-5-w);
    border-radius: var(--br-10);
    margin-top: .3rem;
    padding: .3rem;
}

.sc__collections-user-wrapper img {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--br-6);
    margin-right: .5rem;
}

.sc__collections-user-info {
    display: grid;
}

.sc__collections-user-title {
    font-weight: var(--font-weight-5);
    font-size: var(--font-size-s);
    color: var(--text-custom);
}

.sc__collections-user-nickname {
    font-weight: var(--font-weight-7);
    font-size: var(--font-size-m);
    color: var(--text-default);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sc__collections-about {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    padding-inline: .3rem;
    margin: .5rem .3rem;
}

.sc__collections-about li {
    display: block;
    position: relative;
    overflow: hidden;
    font-size: var(--font-size-m);
}

.sc__collections-about li:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    border-top: 1px dotted var(--text-secondary);
}

.sc__collections-about li .parametr {
    display: inline-block;
    position: relative;
    z-index: 1;
    background-color: var(--card);
    color: var(--text-custom);
    line-height: normal;
    padding-right: .3rem;
}

.sc__collections-about li .parametr svg {
    fill: currentColor;
    width: .8rem;
    height: .8rem;
    margin-bottom: .2rem;
    margin-right: .3rem;
}

.sc__collections-about li .value {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 1;
    background: var(--card);
    color: var(--text-default);
    display: flex;
    align-items: center;
    gap: 5px;
    padding-left: .3rem;
}

.sc__modal-stattrak:has(input[type="checkbox"].switch:checked) {
    background-color: color-mix(in srgb, var(--stattrack) 10%, transparent);
    color: var(--stattrack);
}

.sc__modal-stattrak span {
    color: inherit;
    transition: var(--transition-duration);
}

.sc__modal-stattrak span svg {
    fill: var(--text-default);
    opacity: 0.2;
    margin-left: .3rem;
    transition: var(--transition-duration);
}

.sc__modal-stattrak:has(input[type="checkbox"].switch:checked) span svg {
    fill: var(--stattrack);
    opacity: 1;
}

.sc__modal-stattrak input[type="checkbox"].switch:checked {
    --ab: var(--stattrack);
}

.sc__modal-stattrak input[type="checkbox"]:checked {
    --b: color-mix(in srgb, var(--stattrack) 10%, transparent);
    --bc: color-mix(in srgb, var(--stattrack) 20%, transparent);
}

.sc__modal-float-wrapper {
    margin-top: .5rem;
}

.sc__modal-float-value,
.sc__modal-pattern-value {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
}

.sc__modal-pattern-value {
    margin-top: 1rem;
}

.sc__modal-float-title,
.sc__modal-pattern-title {
    display: flex;
    align-items: center;
    gap: .3rem;
    color: var(--text-secondary);
    width: max-content;
}

.sc__modal-float-title svg,
.sc__modal-pattern-title svg {
    width: .8rem;
    height: .8rem;
    fill: currentColor;
}

.sc__collections-filters {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-top: .3rem;
}

.sc__collections-info {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

/* track bg Chrome, Safari, Yandex, Opera, Edge */
.sc__modal-range {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    border-radius: 0;
    outline: none;
    width: 100%;
    height: 5px;
    margin-top: .8rem;
    padding: 0;
    transition: var(--transition-duration);
    background: -webkit-linear-gradient(to right, var(--span) 0%, var(--input-form) 0%);
    background: linear-gradient(to right, var(--span) 0%, var(--input-form) 0%);
}

/* mozilla firefox */
.sc__modal-range::-moz-range-track {
    -moz-appearance: none;
    appearance: none;
    border: none;
    border-radius: 0;
    outline: none;
    width: 0;
    height: 5px;
    margin-top: .8rem;
    transition: var(--transition-duration);
    background: -moz-linear-gradient(to right, var(--span) 0%, var(--input-form));
    background: linear-gradient(to right, var(--span) 0%, var(--input-form));
}

/* Internet Explorer, bitch! */
.sc__modal-range::-ms-track {
    appearance: none;
    border: none;
    border-radius: 0;
    outline: none;
    width: 0;
    height: 5px;
    margin-top: .8rem;
    transition: var(--transition-duration);
    background: linear-gradient(to right, var(--span) 0%, var(--input-form));
}

.sc__modal-range::-ms-fill-lower {
    border: none;
    border-radius: 0;
    background: linear-gradient(to right, var(--span) 0%, var(--input-form));
}

.sc__modal-range:focus::-ms-fill-lower {
    background: linear-gradient(to right, var(--span) 0%, var(--input-form));
}

.sc__modal-range::-ms-fill-upper {
    background: linear-gradient(to right, var(--span) 0%, var(--input-form));
    border: none;
    border-radius: 0;
}

.sc__modal-range:focus::-ms-fill-upper {
    background: linear-gradient(to right, var(--span) 0%, var(--input-form));
}

.sc__modal-range::-webkit-slider-runnable-track {
    background-color: transparent;
    border: none;
    outline: none;
}

.sc__modal-range-float {
    background: linear-gradient(to right, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 0.3%, rgb(23, 131, 145) 0.3%, rgb(23, 131, 145) 7%, rgb(132, 177, 53) 7%, rgb(132, 177, 53) 15%, rgb(223, 191, 74) 15%, rgb(223, 191, 74) 38%, rgb(238, 134, 65) 38%, rgb(238, 134, 65) 45%, rgb(234, 80, 61) 45%, rgb(234, 80, 61) 99.7%, rgb(0, 0, 0) 99.7%, rgb(0, 0, 0) 100%);
    width: 100%;
}

.sc__modal-range:focus {
    outline: none;
}

.sc__modal-float-description {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.sc__modal-float-description div {
    font-size: var(--font-size-m);
}

.sc__modal-float-description span {
    color: var(--span);
    background-color: var(--transparent-5-w);
    padding: .2rem .3rem;
    border-radius: var(--br-4);
    font-size: var(--font-size-s);
}

/* hand thumb Chrome, Safari, Yandex, Opera, Edge */
.sc__modal-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: var(--br-50);
    border: 0;
    box-shadow: 0 0 0 4px inset var(--text-default);
    background-color: var(--button);
    cursor: pointer;
    transition: var(--transition-duration);
}

/* mozilla firefox */
.sc__modal-range::-moz-range-thumb {
    -moz-appearance: none;
    appearance: none;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: var(--br-50);
    border: 0;
    box-shadow: 0 0 0 4px inset var(--text-default);
    background-color: var(--button);
    cursor: pointer;
    transition: var(--transition-duration);
}

/* Internet Explorer, bitch! */
.sc__modal-range::-ms-thumb {
    appearance: none;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: var(--br-50);
    border: 0;
    box-shadow: 0 0 0 4px inset var(--text-default);
    background-color: var(--button);
    cursor: pointer;
    transition: var(--transition-duration);
}

/* Thumb hover/active Chrome, Safari, Yandex, Opera, Edge*/
.sc__modal-range::-webkit-slider-thumb:hover,
.sc__modal-range::-webkit-slider-thumb:active {
    box-shadow: 0 0 0 5px inset var(--text-default);
}

.sc__modal-range::-webkit-slider-thumb:active {
    box-shadow: 0 0 0 6px inset var(--text-default);
}

/* mozilla firefox */
.sc__modal-range::-moz-range-thumb:hover,
.sc__modal-range::-moz-range-thumb:active {
    box-shadow: 0 0 0 5px inset var(--text-default);
}

.sc__modal-range::-moz-range-thumb:active {
    box-shadow: 0 0 0 6px inset var(--text-default);
}

/* disabled Chrome, Safari, Yandex, Opera, Edge*/
.sc__modal-range:disabled::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px inset var(--text-custom);
}

/* mozilla firefox */
.sc__modal-range:disabled::-moz-range-thumb {
    box-shadow: 0 0 0 4px inset var(--text-custom);
}

/* Internet Explorer, bitch! */
.sc__modal-range:disabled::-ms-thumb {
    box-shadow: 0 0 0 4px inset var(--text-custom);
}

.sc__modal-name-tag {
    margin-top: 1rem;
}

.sc__modal-save-button {
    margin-top: auto;
}

.sc__select {
    margin-bottom: 0;
}

.sc__modal-header-fix {
    display: grid;
    grid-auto-flow: column;
}

.sc__modal-header-fix span:first-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sc__no-skins {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1rem;
}

#communityDetailInstall span {
    color: inherit;
}

#publishCollectionButton.active span {
    color: var(--text-default-invert);
}

.sc__id {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
}

.sc__id svg {
    cursor: pointer;
    fill: var(--text-secondary);
    transition: var(--transition-duration);
}

.sc__id svg:hover {
    fill: var(--text-default);
}

@media (max-width: 768px) {

    #closeEditCollectionButton,
    #resetCollectionButton,
    #backToCommunityList,
    #communityDetailInstall,
    #communityShareButton,
    #editCollectionButton,
    #publishCollectionButton,
    #deleteCheckedSkinsButton {
        font-size: 0;
        padding: 0 0 0 8px;
        width: var(--input-height);
    }

    .sc__header .flex-inline {
        flex-direction: row;
    }

    .sc__modal-skin-left .flex-inline {
        flex-direction: row;
    }

    .sc__modal-skin-settings {
        flex-direction: column-reverse;
        max-height: 90dvh;
        overflow-y: scroll;
        overflow-x: clip;
        padding-right: .3rem;
    }

    .sc__modal-float-value {
        flex-direction: column;
    }

    .sc__modal-float-value input {
        margin-left: unset;
        width: 100% !important;
    }

    .sc__modal-float-radios {
        width: 100%;
    }

    .sc__modal-float-radios label {
        flex: 1;
    }

    .sc__modal-stattrak svg {
        display: none;
    }
}

.sc__skins-checkbox {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
    width: 3rem;
    height: 3rem;
    justify-content: center;
    cursor: pointer;
}

.sc__skins-checkbox input[type=checkbox] {
    background-color: var(--transparent-10-w) !important;
    border-color: var(--transparent-10-w) !important;
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    .sc__skins-checkbox input[type="checkbox"]:hover:not(:checked):not(:disabled) {
        border-color: rgb(255 255 255 / 30%) !important;
        background-color: var(--transparent-20-w) !important;
    }
}

/* adminpanel */

.sc__ap-repo {
    display: flex;
    position: relative;
    padding: .5rem;
    border-radius: var(--br-12);
    flex-direction: column;
    background-color: transparent;
    overflow: hidden;
    margin-bottom: .5rem;
    border: 1px solid var(--transparent-5-w);
}

.sc__ap-repo span {
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-6);
    color: var(--text-custom);
}

.sc__ap-repo-list {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
}

.sc__ap-repo-list li {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem;
    border-radius: var(--br-8);
}

.sc__ap-repo-list li svg {
    width: 2rem;
    height: 2rem;
    fill: currentColor;
}

.actual-date {
    background-color: color-mix(in srgb, var(--green) 10%, transparent);
    color: var(--green);
}

.not-actual-date {
    background-color: color-mix(in srgb, var(--red) 10%, transparent);
    color: var(--red);
}

.sc__settings-title {
    font-size: var(--font-size-default);
    font-weight: var(--font-weight-6);
    margin-bottom: .5rem;
}

.sc__settings-subtitle {
    font-size: var(--font-size-m);
    color: var(--text-secondary);
    background-color: var(--input-form);
    margin-bottom: .3rem;
    padding: .5rem .7rem;
    border-radius: var(--br-10);
}

.sc__settings-wrapper {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.sc__settings-flex-inline {
    align-items: flex-end;
}

.sc__settings-flex-inline button {
    flex: none;
    margin-bottom: .3rem;
}

.sc__skin-new {
    position: absolute;
    top: .3rem;
    left: .3rem;
    background: color-mix(in srgb, var(--orange) 10%, transparent);
    color: var(--orange);
    padding: .1rem .3rem;
    border-radius: var(--br-4);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-5);
    backdrop-filter: blur(2px);
}

/* vip access */

.sc__vip-access-wrapper,
.sc__auth-access-wrapper {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sc__vip-access-wrapper img,
.sc__auth-access-wrapper img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    filter: grayscale(1);
    opacity: .3;
}

.sc__vip-access-content,
.sc__auth-access-content {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    justify-content: center;
}

.sc__vip-access-title,
.sc__auth-access-title {
    font-family: var(--font-family-1);
    font-size: var(--font-size-7xl);
    font-weight: var(--font-weight-7);
}

.sc__vip-access-subtitle,
.sc__auth-access-subtitle {
    background-color: var(--transparent-5-w);
    padding: 1rem;
    backdrop-filter: blur(5px);
    border-radius: var(--br-8);
    border: 1px solid var(--transparent-3-w);
    font-size: var(--font-size-default);
    font-weight: var(--font-weight-6);
    max-width: 50vw;
    text-align: center;
}

.sc__skin-item.rarity_common_weapon:after,
.sc__skin-item.rarity_common:after,
.sc__skin-item.rarity_common_character:after,
.sc__skin-item.rarity_uncommon_weapon:after,
.sc__skin-item.rarity_uncommon:after,
.sc__skin-item.rarity_uncommon_character:after,
.sc__skin-item.rarity_rare_weapon:after,
.sc__skin-item.rarity_rare:after,
.sc__skin-item.rarity_rare_character:after,
.sc__skin-item.rarity_mythical_weapon:after,
.sc__skin-item.rarity_mythical:after,
.sc__skin-item.rarity_mythical_character:after,
.sc__skin-item.rarity_legendary_weapon:after,
.sc__skin-item.rarity_legendary:after,
.sc__skin-item.rarity_legendary_character:after,
.sc__skin-item.rarity_ancient_weapon::after,
.sc__skin-item.rarity_ancient::after,
.sc__skin-item.rarity_ancient_character:after,
.sc__skin-item.rarity_contraband_weapon:after,
.sc__skin-item.rarity_contraband:after,
.sc__skin-item.rarity_contraband_character:after {
    content: '';
    position: absolute;
    left: .7rem;
    bottom: .7rem;
    width: 5px;
    height: 5px;
    border-radius: var(--br-16);
    transition: var(--transition-duration);
}

.sc__skin-item.rarity_common_weapon:hover:after,
.sc__skin-item.rarity_common:hover:after,
.sc__skin-item.rarity_common_character:hover:after,
.sc__skin-item.rarity_uncommon_weapon:hover:after,
.sc__skin-item.rarity_uncommon:hover:after,
.sc__skin-item.rarity_uncommon_character:hover:after,
.sc__skin-item.rarity_rare_weapon:hover:after,
.sc__skin-item.rarity_rare:hover:after,
.sc__skin-item.rarity_rare_character:hover:after,
.sc__skin-item.rarity_mythical_weapon:hover:after,
.sc__skin-item.rarity_mythical:hover:after,
.sc__skin-item.rarity_mythical_character:hover:after,
.sc__skin-item.rarity_legendary_weapon:hover:after,
.sc__skin-item.rarity_legendary:hover:after,
.sc__skin-item.rarity_legendary_character:hover:after,
.sc__skin-item.rarity_ancient_weapon:hover:after,
.sc__skin-item.rarity_ancient:hover:after,
.sc__skin-item.rarity_ancient_character:hover:after,
.sc__skin-item.rarity_contraband_weapon:hover:after,
.sc__skin-item.rarity_contraband:hover:after,
.sc__skin-item.rarity_contraband_character:hover:after {
    width: 20px;
}

.sc__skin-item.rarity_common_weapon:before,
.sc__skin-item.rarity_common:before,
.sc__skin-item.rarity_common_character:before,
.sc__skin-item.rarity_uncommon_weapon:before,
.sc__skin-item.rarity_uncommon:before,
.sc__skin-item.rarity_uncommon_character:before,
.sc__skin-item.rarity_rare_weapon:before,
.sc__skin-item.rarity_rare:before,
.sc__skin-item.rarity_rare_character:before,
.sc__skin-item.rarity_mythical_weapon:before,
.sc__skin-item.rarity_mythical:before,
.sc__skin-item.rarity_mythical_character:before,
.sc__skin-item.rarity_legendary_weapon:before,
.sc__skin-item.rarity_legendary:before,
.sc__skin-item.rarity_legendary_character:before,
.sc__skin-item.rarity_ancient_weapon:before,
.sc__skin-item.rarity_ancient:before,
.sc__skin-item.rarity_ancient_character:before,
.sc__skin-item.rarity_contraband_weapon:before,
.sc__skin-item.rarity_contraband:before,
.sc__skin-item.rarity_contraband_character:before {
    content: '';
    position: absolute;
    inset: 0;
}

.sc__skins-card.rarity_common_weapon:before,
.sc__skins-card.rarity_common:before,
.sc__skins-card.rarity_character:before,
.sc__skins-card.rarity_uncommon_weapon:before,
.sc__skins-card.rarity_uncommon:before,
.sc__skins-card.rarity_uncommon_character:before,
.sc__skins-card.rarity_rare_weapon:before,
.sc__skins-card.rarity_rare:before,
.sc__skins-card.rarity_rare_character:before,
.sc__skins-card.rarity_mythical_weapon:before,
.sc__skins-card.rarity_mythical:before,
.sc__skins-card.rarity_mythical_character:before,
.sc__skins-card.rarity_legendary_weapon:before,
.sc__skins-card.rarity_legendary:before,
.sc__skins-card.rarity_legendary_character:before,
.sc__skins-card.rarity_ancient_weapon:before,
.sc__skins-card.rarity_ancient:before,
.sc__skins-card.rarity_ancient_character:before,
.sc__skins-card.rarity_contraband_weapon:before,
.sc__skins-card.rarity_contraband:before,
.sc__skins-card.rarity_contraband_character:before,
.sc__collection-skin-preview.rarity_common_weapon .sc__collection-img-preview:before,
.sc__collection-skin-preview.rarity_common .sc__collection-img-preview:before,
.sc__collection-skin-preview.rarity_common_character .sc__collection-img-preview:before,
.sc__collection-skin-preview.rarity_uncommon_weapon .sc__collection-img-preview:before,
.sc__collection-skin-preview.rarity_uncommon .sc__collection-img-preview:before,
.sc__collection-skin-preview.rarity_uncommon_character .sc__collection-img-preview:before,
.sc__collection-skin-preview.rarity_rare_weapon .sc__collection-img-preview:before,
.sc__collection-skin-preview.rarity_rare .sc__collection-img-preview:before,
.sc__collection-skin-preview.rarity_rare_character .sc__collection-img-preview:before,
.sc__collection-skin-preview.rarity_mythical_weapon .sc__collection-img-preview:before,
.sc__collection-skin-preview.rarity_mythical .sc__collection-img-preview:before,
.sc__collection-skin-preview.rarity_mythical_character .sc__collection-img-preview:before,
.sc__collection-skin-preview.rarity_legendary_weapon .sc__collection-img-preview:before,
.sc__collection-skin-preview.rarity_legendary .sc__collection-img-preview:before,
.sc__collection-skin-preview.rarity_legendary_character .sc__collection-img-preview:before,
.sc__collection-skin-preview.rarity_ancient_weapon .sc__collection-img-preview:before,
.sc__collection-skin-preview.rarity_ancient .sc__collection-img-preview:before,
.sc__collection-skin-preview.rarity_ancient_character .sc__collection-img-preview:before,
.sc__collection-skin-preview.rarity_contraband_weapon .sc__collection-img-preview:before,
.sc__collection-skin-preview.rarity_contraband .sc__collection-img-preview:before,
.sc__collection-skin-preview.rarity_contraband_character .sc__collection-img-preview:before,
.sc__modal-skin-preview.rarity_common_weapon:before,
.sc__modal-skin-preview.rarity_common:before,
.sc__modal-skin-preview.rarity_common_character:before,
.sc__modal-skin-preview.rarity_uncommon_weapon:before,
.sc__modal-skin-preview.rarity_uncommon:before,
.sc__modal-skin-preview.rarity_uncommon_character:before,
.sc__modal-skin-preview.rarity_rare_weapon:before,
.sc__modal-skin-preview.rarity_rare:before,
.sc__modal-skin-preview.rarity_rare_character:before,
.sc__modal-skin-preview.rarity_mythical_weapon:before,
.sc__modal-skin-preview.rarity_mythical:before,
.sc__modal-skin-preview.rarity_mythical_character:before,
.sc__modal-skin-preview.rarity_legendary_weapon:before,
.sc__modal-skin-preview.rarity_legendary:before,
.sc__modal-skin-preview.rarity_legendary_character:before,
.sc__modal-skin-preview.rarity_ancient_weapon:before,
.sc__modal-skin-preview.rarity_ancient:before,
.sc__modal-skin-preview.rarity_ancient_character:before,
.sc__modal-skin-preview.rarity_contraband_weapon:before,
.sc__modal-skin-preview.rarity_contraband:before,
.sc__modal-skin-preview.rarity_contraband_character:before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* vanilla */

.sc__skin-item.vanilla.active {
    border: 2px solid var(--transparent-5-w);
}

.sc__skin-item.vanilla .sc__choose-side {
    background-color: color-mix(in srgb, var(--text-custom) 10%, transparent);
}

/* common */
.rarity_default,
.rarity_common,
.rarity_common_weapon,
.rarity_default,
.rarity_common_character {
    color: var(--rare-1);
}

.sc__skin-item.rarity_common_weapon:after,
.sc__skin-item.rarity_common:after,
.sc__skin-item.rarity_common_character:after {
    background-color: var(--rare-1);
}

.sc__skin-item.rarity_common_weapon:before,
.sc__skin-item.rarity_common:before,
.sc__skin-item.rarity_common_character:before {
    background: linear-gradient(45deg, color-mix(in srgb, var(--rare-1) 15%, transparent), color-mix(in srgb, var(--rare-1) 5%, transparent), transparent);
}

.sc__skin-item.rarity_common_weapon .sc__choose-side,
.sc__skin-item.rarity_common .sc__choose-side,
.sc__skin-item.rarity_common_character .sc__choose-side {
    background-color: color-mix(in srgb, var(--rare-1) 10%, transparent);
    color: var(--rare-1);
}

.sc__skin-item.rarity_common_weapon.active,
.sc__skin-item.rarity_common.active,
.sc__skin-item.rarity_common_character.active {
    border: 2px solid var(--rare-1);
}

.sc__skins-card.rarity_common_weapon:before,
.sc__skins-card.rarity_common:before,
.sc__skins-card.rarity_common_character:before {
    background-image: linear-gradient(33deg, color-mix(in srgb, var(--rare-1) 15%, transparent), color-mix(in srgb, var(--rare-1) 5%, transparent), transparent);
}

.sc__collection-skin.rarity_common_weapon,
.sc__collection-skin.rarity_common,
.sc__collection-skin.rarity_common_character {
    background-image: linear-gradient(45deg, color-mix(in srgb, var(--rare-1) 15%, transparent), color-mix(in srgb, var(--rare-1) 5%, transparent), transparent);
}

.sc__collection-skin-preview.rarity_common_weapon .sc__collection-img-preview:before,
.sc__collection-skin-preview.rarity_common .sc__collection-img-preview:before,
.sc__collection-skin-preview.rarity_common_character .sc__collection-img-preview:before {
    background-image: linear-gradient(228deg, color-mix(in srgb, var(--rare-1) 10%, transparent), color-mix(in srgb, var(--rare-1) 7%, transparent), transparent);
}

.sc__modal-sticker-keychain.rarity_common,
.sc__modal-sticker-keychain.rarity_default {
    background-image: linear-gradient(45deg, color-mix(in srgb, var(--rare-1) 15%, transparent), color-mix(in srgb, var(--rare-1) 5%, transparent), transparent);
}

.sc__modal-skin-preview.rarity_common_weapon:before,
.sc__modal-skin-preview.rarity_common:before,
.sc__modal-skin-preview.rarity_common_character:before {
    background-image: radial-gradient(circle, color-mix(in srgb, var(--rare-1) 10%, transparent), transparent);
}

/* uncommon */
.rarity_uncommon,
.rarity_uncommon_weapon,
.rarity_uncommon_character {
    color: var(--rare-2);
}

.sc__skin-item.rarity_uncommon_weapon:after,
.sc__skin-item.rarity_uncommon:after,
.sc__skin-item.rarity_uncommon_character:after {
    background-color: var(--rare-2);
}

.sc__skin-item.rarity_uncommon_weapon:before,
.sc__skin-item.rarity_uncommon:before,
.sc__skin-item.rarity_uncommon_character:before {
    background: linear-gradient(45deg, color-mix(in srgb, var(--rare-2) 15%, transparent), color-mix(in srgb, var(--rare-2) 5%, transparent), transparent);
}

.sc__skin-item.rarity_uncommon_weapon .sc__choose-side,
.sc__skin-item.rarity_uncommon .sc__choose-side,
.sc__skin-item.rarity_uncommon_character .sc__choose-side {
    background-color: color-mix(in srgb, var(--rare-2) 10%, transparent);
    color: var(--rare-2);
}

.sc__skin-item.rarity_uncommon_weapon.active,
.sc__skin-item.rarity_uncommon.active,
.sc__skin-item.rarity_uncommon_character.active {
    border: 2px solid var(--rare-2);
}

.sc__skins-card.rarity_uncommon_weapon:before,
.sc__skins-card.rarity_uncommon:before,
.sc__skins-card.rarity_uncommon_character:before {
    background-image: linear-gradient(33deg, color-mix(in srgb, var(--rare-2) 15%, transparent), color-mix(in srgb, var(--rare-2) 5%, transparent), transparent);
}

.sc__collection-skin.rarity_uncommon_weapon,
.sc__collection-skin.rarity_uncommon,
.sc__collection-skin.rarity_uncommon_character {
    background-image: linear-gradient(45deg, color-mix(in srgb, var(--rare-2) 15%, transparent), color-mix(in srgb, var(--rare-2) 5%, transparent), transparent);
}

.sc__collection-skin-preview.rarity_uncommon_weapon .sc__collection-img-preview:before,
.sc__collection-skin-preview.rarity_uncommon .sc__collection-img-preview:before,
.sc__collection-skin-preview.rarity_uncommon_character .sc__collection-img-preview:before {
    background-image: linear-gradient(228deg, color-mix(in srgb, var(--rare-2) 10%, transparent), color-mix(in srgb, var(--rare-2) 7%, transparent), transparent);
}

.sc__modal-sticker-keychain.rarity_uncommon {
    background-image: linear-gradient(45deg, color-mix(in srgb, var(--rare-2) 15%, transparent), color-mix(in srgb, var(--rare-2) 5%, transparent), transparent);
}

.sc__modal-skin-preview.rarity_uncommon_weapon:before,
.sc__modal-skin-preview.rarity_uncommon:before,
.sc__modal-skin-preview.rarity_uncommon_character:before {
    background-image: radial-gradient(circle, color-mix(in srgb, var(--rare-2) 10%, transparent), transparent);
}

/* rare */
.rarity_rare,
.rarity_rare_weapon,
.rarity_rare_character {
    color: var(--rare-3);
}

.sc__skin-item.rarity_rare_weapon:after,
.sc__skin-item.rarity_rare:after,
.sc__skin-item.rarity_rare_character:after {
    background-color: var(--rare-3);
}

.sc__skin-item.rarity_rare_weapon:before,
.sc__skin-item.rarity_rare:before,
.sc__skin-item.rarity_rare_character:before {
    background: linear-gradient(45deg, color-mix(in srgb, var(--rare-3) 15%, transparent), color-mix(in srgb, var(--rare-3) 5%, transparent), transparent);
}

.sc__skin-item.rarity_rare_weapon .sc__choose-side,
.sc__skin-item.rarity_rare .sc__choose-side,
.sc__skin-item.rarity_rare_character .sc__choose-side {
    background-color: color-mix(in srgb, var(--rare-3) 10%, transparent);
    color: var(--rare-3);
}

.sc__skin-item.rarity_rare_weapon.active,
.sc__skin-item.rarity_rare.active,
.sc__skin-item.rarity_rare_character.active {
    border: 2px solid var(--rare-3);
}

.sc__skins-card.rarity_rare_weapon:before,
.sc__skins-card.rarity_rare:before,
.sc__skins-card.rarity_rare_character:before {
    background-image: linear-gradient(33deg, color-mix(in srgb, var(--rare-3) 15%, transparent), color-mix(in srgb, var(--rare-3) 5%, transparent), transparent);
}

.sc__collection-skin.rarity_rare_weapon,
.sc__collection-skin.rarity_rare,
.sc__collection-skin.rarity_rare_character {
    background-image: linear-gradient(45deg, color-mix(in srgb, var(--rare-3) 15%, transparent), color-mix(in srgb, var(--rare-3) 5%, transparent), transparent);
}

.sc__collection-skin-preview.rarity_rare_weapon .sc__collection-img-preview:before,
.sc__collection-skin-preview.rarity_rare .sc__collection-img-preview:before,
.sc__collection-skin-preview.rarity_rare_character .sc__collection-img-preview:before {
    background-image: linear-gradient(228deg, color-mix(in srgb, var(--rare-3) 10%, transparent), color-mix(in srgb, var(--rare-3) 7%, transparent), transparent);
}

.sc__modal-sticker-keychain.rarity_rare {
    background-image: linear-gradient(45deg, color-mix(in srgb, var(--rare-3) 15%, transparent), color-mix(in srgb, var(--rare-3) 5%, transparent), transparent);
}

.sc__modal-skin-preview.rarity_rare_weapon:before,
.sc__modal-skin-preview.rarity_rare:before,
.sc__modal-skin-preview.rarity_rare_character:before {
    background-image: radial-gradient(circle, color-mix(in srgb, var(--rare-3) 10%, transparent), transparent);
}

/* mythical */
.rarity_mythical,
.rarity_mythical_weapon,
.rarity_mythical_character {
    color: var(--rare-4);
}

.sc__skin-item.rarity_mythical_weapon:after,
.sc__skin-item.rarity_mythical:after,
.sc__skin-item.rarity_mythical_character:after {
    background-color: var(--rare-4);
}

.sc__skin-item.rarity_mythical_weapon:before,
.sc__skin-item.rarity_mythical:before,
.sc__skin-item.rarity_mythical_character:before {
    background: linear-gradient(45deg, color-mix(in srgb, var(--rare-4) 15%, transparent), color-mix(in srgb, var(--rare-4) 5%, transparent), transparent);
}

.sc__skin-item.rarity_mythical_weapon .sc__choose-side,
.sc__skin-item.rarity_mythical .sc__choose-side,
.sc__skin-item.rarity_mythical_character .sc__choose-side {
    background-color: color-mix(in srgb, var(--rare-4) 10%, transparent);
    color: var(--rare-4);
}

.sc__skin-item.rarity_mythical_weapon.active,
.sc__skin-item.rarity_mythical.active,
.sc__skin-item.rarity_mythical_character.active {
    border: 2px solid var(--rare-4);
}

.sc__skins-card.rarity_mythical_weapon:before,
.sc__skins-card.rarity_mythical:before,
.sc__skins-card.rarity_mythical_character:before {
    background-image: linear-gradient(33deg, color-mix(in srgb, var(--rare-4) 15%, transparent), color-mix(in srgb, var(--rare-4) 5%, transparent), transparent);
}

.sc__collection-skin.rarity_mythical_weapon,
.sc__collection-skin.rarity_mythical,
.sc__collection-skin.rarity_mythical_character {
    background-image: linear-gradient(45deg, color-mix(in srgb, var(--rare-4) 15%, transparent), color-mix(in srgb, var(--rare-4) 5%, transparent), transparent);
}

.sc__collection-skin-preview.rarity_mythical_weapon .sc__collection-img-preview:before,
.sc__collection-skin-preview.rarity_mythical .sc__collection-img-preview:before,
.sc__collection-skin-preview.rarity_mythical_character .sc__collection-img-preview:before {
    background-image: linear-gradient(228deg, color-mix(in srgb, var(--rare-4) 10%, transparent), color-mix(in srgb, var(--rare-4) 7%, transparent), transparent);
}

.sc__modal-sticker-keychain.rarity_mythical {
    background-image: linear-gradient(45deg, color-mix(in srgb, var(--rare-4) 15%, transparent), color-mix(in srgb, var(--rare-4) 5%, transparent), transparent);
}

.sc__modal-skin-preview.rarity_mythical_weapon:before,
.sc__modal-skin-preview.rarity_mythical:before,
.sc__modal-skin-preview.rarity_mythical_character:before {
    background-image: radial-gradient(circle, color-mix(in srgb, var(--rare-4) 10%, transparent), transparent);
}

/* legendary */
.rarity_legendary,
.rarity_legendary_weapon,
.rarity_legendary_character {
    color: var(--rare-5);
}

.sc__skin-item.rarity_legendary_weapon:after,
.sc__skin-item.rarity_legendary:after,
.sc__skin-item.rarity_legendary_character:after {
    background-color: var(--rare-5);
}

.sc__skin-item.rarity_legendary_weapon:before,
.sc__skin-item.rarity_legendary:before,
.sc__skin-item.rarity_legendary_character:before {
    background: linear-gradient(45deg, color-mix(in srgb, var(--rare-5) 15%, transparent), color-mix(in srgb, var(--rare-5) 5%, transparent), transparent);
}

.sc__skin-item.rarity_legendary_weapon .sc__choose-side,
.sc__skin-item.rarity_legendary .sc__choose-side,
.sc__skin-item.rarity_legendary_character .sc__choose-side {
    background-color: color-mix(in srgb, var(--rare-5) 10%, transparent);
    color: var(--rare-5);
}

.sc__skin-item.rarity_legendary_weapon.active,
.sc__skin-item.rarity_legendary.active,
.sc__skin-item.rarity_legendary_character.active {
    border: 2px solid var(--rare-5);
}

.sc__skins-card.rarity_legendary_weapon:before,
.sc__skins-card.rarity_legendary:before,
.sc__skins-card.rarity_legendary_character:before {
    background-image: linear-gradient(33deg, color-mix(in srgb, var(--rare-5) 15%, transparent), color-mix(in srgb, var(--rare-5) 5%, transparent), transparent);
}

.sc__collection-skin.rarity_legendary_weapon,
.sc__collection-skin.rarity_legendary,
.sc__collection-skin.rarity_legendary_character {
    background-image: linear-gradient(45deg, color-mix(in srgb, var(--rare-5) 15%, transparent), color-mix(in srgb, var(--rare-5) 5%, transparent), transparent);
}

.sc__collection-skin-preview.rarity_legendary_weapon .sc__collection-img-preview:before,
.sc__collection-skin-preview.rarity_legendary .sc__collection-img-preview:before,
.sc__collection-skin-preview.rarity_legendary_character .sc__collection-img-preview:before {
    background-image: linear-gradient(228deg, color-mix(in srgb, var(--rare-5) 10%, transparent), color-mix(in srgb, var(--rare-5) 7%, transparent), transparent);
}

.sc__modal-sticker-keychain.rarity_legendary {
    background-image: linear-gradient(45deg, color-mix(in srgb, var(--rare-5) 15%, transparent), color-mix(in srgb, var(--rare-5) 5%, transparent), transparent);
}

.sc__modal-skin-preview.rarity_legendary_weapon:before,
.sc__modal-skin-preview.rarity_legendary:before,
.sc__modal-skin-preview.rarity_legendary_character:before {
    background-image: radial-gradient(circle, color-mix(in srgb, var(--rare-5) 10%, transparent), transparent);
}

/* ancient */
.rarity_ancient,
.rarity_ancient_weapon,
.rarity_ancient_character {
    color: var(--rare-6);
}

.sc__skin-item.rarity_ancient_weapon:after,
.sc__skin-item.rarity_ancient:after,
.sc__skin-item.rarity_ancient_character:after {
    background-color: var(--rare-6);
}

.sc__skin-item.rarity_ancient_weapon:before,
.sc__skin-item.rarity_ancient:before,
.sc__skin-item.rarity_ancient_character:before {
    background: linear-gradient(45deg, color-mix(in srgb, var(--rare-6) 15%, transparent), color-mix(in srgb, var(--rare-6) 5%, transparent), transparent);
}

.sc__skin-item.rarity_ancient_weapon .sc__choose-side,
.sc__skin-item.rarity_ancient .sc__choose-side,
.sc__skin-item.rarity_ancient_character .sc__choose-side {
    background-color: color-mix(in srgb, var(--rare-6) 10%, transparent);
    color: var(--rare-6);
}

.sc__skin-item.rarity_ancient_weapon.active,
.sc__skin-item.rarity_ancient.active,
.sc__skin-item.rarity_ancient_character.active {
    border: 2px solid var(--rare-6);
}

.sc__skins-card.rarity_ancient_weapon:before,
.sc__skins-card.rarity_ancient:before,
.sc__skins-card.rarity_ancient_character:before {
    background-image: linear-gradient(33deg, color-mix(in srgb, var(--rare-6) 15%, transparent), color-mix(in srgb, var(--rare-6) 5%, transparent), transparent);
}

.sc__collection-skin.rarity_ancient_weapon,
.sc__collection-skin.rarity_ancient,
.sc__collection-skin.rarity_ancient_character {
    background-image: linear-gradient(45deg, color-mix(in srgb, var(--rare-6) 15%, transparent), color-mix(in srgb, var(--rare-6) 5%, transparent), transparent);
}

.sc__collection-skin-preview.rarity_ancient_weapon .sc__collection-img-preview:before,
.sc__collection-skin-preview.rarity_ancient .sc__collection-img-preview:before,
.sc__collection-skin-preview.rarity_ancient_character .sc__collection-img-preview:before {
    background-image: linear-gradient(228deg, color-mix(in srgb, var(--rare-6) 10%, transparent), color-mix(in srgb, var(--rare-6) 7%, transparent), transparent);
}

.sc__modal-sticker-keychain.rarity_ancient {
    background-image: linear-gradient(45deg, color-mix(in srgb, var(--rare-6) 15%, transparent), color-mix(in srgb, var(--rare-6) 5%, transparent), transparent);
}

.sc__modal-skin-preview.rarity_ancient_weapon:before,
.sc__modal-skin-preview.rarity_ancient:before,
.sc__modal-skin-preview.rarity_ancient_character:before {
    background-image: radial-gradient(circle, color-mix(in srgb, var(--rare-6) 10%, transparent), transparent);
}

/* Contraband */
.rarity_contraband,
.rarity_contraband_weapon,
.rarity_contraband_character {
    color: var(--rare-7);
}

.sc__skin-item.rarity_contraband_weapon:after,
.sc__skin-item.rarity_contraband:after,
.sc__skin-item.rarity_contraband_character:after {
    background-color: var(--rare-7);
}

.sc__skin-item.rarity_contraband_weapon:before,
.sc__skin-item.rarity_contraband:before,
.sc__skin-item.rarity_contraband_character:before {
    background: linear-gradient(45deg, color-mix(in srgb, var(--rare-7) 15%, transparent), color-mix(in srgb, var(--rare-7) 5%, transparent), transparent);
}

.sc__skin-item.rarity_contraband_weapon .sc__choose-side,
.sc__skin-item.rarity_contraband .sc__choose-side,
.sc__skin-item.rarity_contraband_character .sc__choose-side {
    background-color: color-mix(in srgb, var(--rare-7) 10%, transparent);
    color: var(--rare-7);
}

.sc__skin-item.rarity_contraband_weapon.active,
.sc__skin-item.rarity_contraband.active,
.sc__skin-item.rarity_contraband_character.active {
    border: 2px solid var(--rare-7);
}

.sc__skins-card.rarity_contraband_weapon:before,
.sc__skins-card.rarity_contraband:before,
.sc__skins-card.rarity_contraband_character:before {
    background-image: linear-gradient(33deg, color-mix(in srgb, var(--rare-7) 15%, transparent), color-mix(in srgb, var(--rare-7) 5%, transparent), transparent);
}

.sc__collection-skin.rarity_contraband_weapon,
.sc__collection-skin.rarity_contraband,
.sc__collection-skin.rarity_contraband_character {
    background-image: linear-gradient(45deg, color-mix(in srgb, var(--rare-7) 15%, transparent), color-mix(in srgb, var(--rare-7) 5%, transparent), transparent);
}

.sc__collection-skin-preview.rarity_contraband_weapon .sc__collection-img-preview:before,
.sc__collection-skin-preview.rarity_contraband .sc__collection-img-preview:before,
.sc__collection-skin-preview.rarity_contraband_character .sc__collection-img-preview:before {
    background-image: linear-gradient(228deg, color-mix(in srgb, var(--rare-7) 10%, transparent), color-mix(in srgb, var(--rare-7) 7%, transparent), transparent);
}

.sc__modal-sticker-keychain.rarity_contraband {
    background-image: linear-gradient(45deg, color-mix(in srgb, var(--rare-7) 15%, transparent), color-mix(in srgb, var(--rare-7) 5%, transparent), transparent);
}

.sc__modal-skin-preview.rarity_contraband_weapon:before,
.sc__modal-skin-preview.rarity_contraband:before,
.sc__modal-skin-preview.rarity_contraband_character:before {
    background-image: radial-gradient(circle, color-mix(in srgb, var(--rare-7) 10%, transparent), transparent);
}

.sc__rarity-icon {
    width: 1rem !important;
    height: 1rem !important;
}

.rarity_common .sc__rarity-icon,
.rarity_common_weapon .sc__rarity-icon,
.rarity_common_character .sc__rarity-icon {
    fill: var(--rare-1) !important;
}

.rarity_uncommon .sc__rarity-icon,
.rarity_uncommon_weapon .sc__rarity-icon,
.rarity_uncommon_character .sc__rarity-icon {
    fill: var(--rare-2) !important;
}

.rarity_rare .sc__rarity-icon,
.rarity_rare_weapon .sc__rarity-icon,
.rarity_rare_character .sc__rarity-icon {
    fill: var(--rare-3) !important;
}

.rarity_mythical .sc__rarity-icon,
.rarity_mythical_weapon .sc__rarity-icon,
.rarity_mythical_character .sc__rarity-icon {
    fill: var(--rare-4) !important;
}

.rarity_legendary .sc__rarity-icon,
.rarity_legendary_weapon .sc__rarity-icon,
.rarity_legendary_character .sc__rarity-icon {
    fill: var(--rare-5) !important;
}

.rarity_ancient .sc__rarity-icon,
.rarity_ancient_weapon .sc__rarity-icon,
.rarity_ancient_character .sc__rarity-icon {
    fill: var(--rare-6) !important;
}

.rarity_contraband .sc__rarity-icon,
.rarity_contraband_weapon .sc__rarity-icon,
.rarity_contraband_character .sc__rarity-icon {
    fill: var(--rare-7) !important;
}

.sc__filter-rarity label:has(.rarity_common):has(input:checked),
.sc__filter-rarity label:has(.rarity_common_weapon):has(input:checked),
.sc__filter-rarity label:has(.rarity_common_character):has(input:checked) {
    border-color: var(--rare-1);
    background-color: color-mix(in srgb, var(--rare-1) 35%, transparent);
}

.sc__filter-rarity label:has(.rarity_uncommon):has(input:checked),
.sc__filter-rarity label:has(.rarity_uncommon_weapon):has(input:checked),
.sc__filter-rarity label:has(.rarity_uncommon_character):has(input:checked) {
    border-color: var(--rare-2);
    background-color: color-mix(in srgb, var(--rare-2) 35%, transparent);
}

.sc__filter-rarity label:has(.rarity_rare):has(input:checked),
.sc__filter-rarity label:has(.rarity_rare_weapon):has(input:checked),
.sc__filter-rarity label:has(.rarity_rare_character):has(input:checked) {
    border-color: var(--rare-3);
    background-color: color-mix(in srgb, var(--rare-3) 35%, transparent);
}

.sc__filter-rarity label:has(.rarity_mythical):has(input:checked),
.sc__filter-rarity label:has(.rarity_mythical_weapon):has(input:checked),
.sc__filter-rarity label:has(.rarity_mythical_character):has(input:checked) {
    border-color: var(--rare-4);
    background-color: color-mix(in srgb, var(--rare-4) 35%, transparent);
}

.sc__filter-rarity label:has(.rarity_legendary):has(input:checked),
.sc__filter-rarity label:has(.rarity_legendary_weapon):has(input:checked),
.sc__filter-rarity label:has(.rarity_legendary_character):has(input:checked) {
    border-color: var(--rare-5);
    background-color: color-mix(in srgb, var(--rare-5) 35%, transparent);
}

.sc__filter-rarity label:has(.rarity_ancient):has(input:checked),
.sc__filter-rarity label:has(.rarity_ancient_weapon):has(input:checked),
.sc__filter-rarity label:has(.rarity_ancient_character):has(input:checked) {
    border-color: var(--rare-6);
    background-color: color-mix(in srgb, var(--rare-6) 35%, transparent);
}

.sc__filter-rarity label:has(.rarity_contraband):has(input:checked),
.sc__filter-rarity label:has(.rarity_contraband_weapon):has(input:checked),
.sc__filter-rarity label:has(.rarity_contraband_character):has(input:checked) {
    border-color: var(--rare-7);
    background-color: color-mix(in srgb, var(--rare-7) 35%, transparent);
}