%icon-silhouette {
    content: "";
    display: block;
    position: absolute;
    background: #000;
    -webkit-mask-image: var(
        --icon,
        url("https://cdn.jsdelivr.net/gh/enstars/img/icon/unknown.png")
    );
    -webkit-mask-size: 100%;
    -webkit-mask-position: 100%;
    mask-image: var(
        --icon,
        url("https://cdn.jsdelivr.net/gh/enstars/img/icon/unknown.png")
    );
    mask-size: 100%;
    mask-position: 100%;
    top: 0;
    width: 100%;
    height: 100%;
}

[unknown] {
    .msr-icon {
        &__base {
            background: #b3b3b3;
        }

        &__wrapper::after {
            @extend %icon-silhouette;
        }
    }

    .msr-name {
        &::before {
            content: "???";
        }
    }

    .msr-line p {
        background: #f1f1f1;

        &:first-child::before {
            background: #f1f1f1;
        }
    }
}

[hidden] {
    .msr-icon__wrapper::after {
        @extend %icon-silhouette;
    }
}