.msr-unit {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    row-gap: 1px;
    margin-bottom: var(--msr-unit-margin);
    font-size: var(--msr-line-size);
}

.msr-icon {
    grid-row: 1/3;

    &__wrapper {
        border-radius: var(--msr-icon-border);
        position: relative;
        overflow: hidden;
        width: var(--msr-icon-size);
        height: var(--msr-icon-size);
    }

    &__base {
        display: block;
        background: 100% / 100%
                var(
                    --icon,
                    url("https://cdn.jsdelivr.net/gh/enstars/img/icon/unknown.png")
                ),
            var(--color, #b3b3b3);
        width: 100%;
        height: 100%;
    }
}

.msr-name {
    font-size: 0.85em;
    line-height: 0.9;
    font-weight: 700;
    text-transform: var(--msr-name-case);

    &::before {
        content: var(--name, "???");
    }
}

.msr-line {
    display: flex;
    flex-direction: column;
    grid-column: 2;
    row-gap: var(--msr-line-gap);

    p {
        align-self: flex-start;
        background: var(--light-mode, #f1f1f1);
        color: #222;
        padding: 0.6em;
        margin: 0;
        border-radius: var(--msr-line-border);
        position: relative;
        filter: var(--msr-line-filter, 0);

        &:hover {
            transform: translate(2px, 0px);
        }

        &:first-child {
            border-top-left-radius: 0;

            &::before {
                content: "";
                display: block;
                background: var(--light-mode, #f1f1f1);
                width: 8px;
                height: 12px;
                position: absolute;
                top: 0;
                left: -6px;
                -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M6,12H7V0H.59C.17,0,0,.11,0,.55V1c0,.21.13.44.59.71C4.31,3.88,6,7.61,6,12Z'/%3E%3C/svg%3E")
                    no-repeat 100% 100%;
                mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M6,12H7V0H.59C.17,0,0,.11,0,.55V1c0,.21.13.44.59.71C4.31,3.88,6,7.61,6,12Z'/%3E%3C/svg%3E")
                    no-repeat 100% 100%;
            }
        }
    }
}

.msr-unit p,
.msr-line p:first-child::before,
.msr-icon__wrapper,
.msr-icon__base {
    transition: all 0.2s ease;
}